由地图图块切断的符号

Question

当我向折线添加箭头时,当箭头位于地图图块的边缘时,它会被切断.这可以使用文档中的示例代码(https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-arrow)进行复制,只需将其拖动并移动一点即可.

以下是不在边缘时的外观:

这是它在边缘看起来的样子:

版本(3.16)和实验(3.17)版本都存在问题.我已经在google的bugtracker上报道了它,但它们可能需要数年才能修复它.那么,有没有人知道解决方法？

编辑:哦,我应该补充说,它不会发生在小笔画时,它必须像图像上那样大一些.

Answer 1

问题：

使用预定义符号路径时会发生错误。

// Define a symbol using a predefined path (an arrow)
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};

JSFiddle demo

解决方案：

创建您自己的符号路径，问题将不再出现。

// Define your custom symbol path
var lineSymbol = {
    path: 'M -2,0 0,-2 2,0 z',
    strokeColor: '#F00',
    fillColor: '#F00',
    fillOpacity: 1
};

JSFiddle demo

这是一个很简单的修复，但它仍然是一个错误，所以我认为您创建错误报告是一件好事。

编辑：

我们收到了 Google 的反馈。

jsfiddle 显示的符号太大。

https://developers.google.com/maps/documentation/javascript/3.exp/reference#Symbol

'scale' 参数的文档说：缩放后，符号必须位于以符号锚点为中心、大小为 22 像素的正方形内。