javascript - 被 map 图 block chop 的符号

Question

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

这是它不在边缘时的样子:

这是它在边缘的样子:

发布 (3.16) 和实验 (3.17) 版本均存在此问题。我已在 google's bugtracker 上报告过它，但他们修复它可能需要数年时间。那么，有人知道解决方法吗？

编辑:哦，我应该补充一点，小 strokeWeight 不会发生这种情况，它必须像图片上那样大一点。

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 的反馈。

The jsfiddle shows a symbol that's too big.

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

The documentation for the 'scale' parameter says: after scaling, the symbol must lie inside a square 22 pixels in size centered at the symbol's anchor.