google-maps-api-3 - Google Maps API v3 SVG标记消失

Question

我正在使用SVG路径符号通过Google Maps API v3与多段线一起创建标记。有时，添加一些标记后，它们只会从 map 上停止显示。如果我平移 map ，即使只有1px，它们也会再次显示。

添加一些后，SVG标记停止显示

SVG标记在pan 之后再次显示

这是在FF，Safari，Chrome和iPhone浏览器中发生的。

这是我的折线代码:

var lineSymbol = {
    path: g.SymbolPath.FORWARD_OPEN_ARROW,
    scale:1.5
};

polyOptions = {
    strokeColor: '#0026b3',
    strokeOpacity: 1.0,
    strokeWeight: 1,
    geodesic: true,
    icons: [{
        icon: lineSymbol,
        repeat: '100px'
    }],
    zIndex: 10
};

polyLine = new g.Polyline(polyOptions);
polyLine.setMap(map);

以及SVG标记的代码:

var path = polyLine.getPath();
path.push(event.latLng);

var icon = {

    path: "M68.501,23.781 43.752,48.529 66.918,71.695 66.918,120.362 70.085,120.362 70.085,71.694 93.249,48.529",
    fillColor: iconColor,
    fillOpacity: .8,
    anchor: new g.Point(70.085, 120.362),
    strokeWeight: 0,
    scale:.4
};

var marker = new g.Marker({
    position: event.latLng,
    map: map,
    draggable: false,
    icon: icon,
    title: title,
    zIndex : -20
});

知道为什么我的标记实际上在 map 上时会消失吗？提前致谢。

这是一个 fiddle ，您可以在其中重现该问题:http://jsfiddle.net/upsidown/gNQRB/

这是一个YouTube视频，用于说明问题:https://www.youtube.com/watch?v=uGAiwAuasmU

编辑:

已在Google创建了一个 错误报告: http://code.google.com/p/gmaps-api-issues/issues/detail?id=5351

Answer 1

对我有效，并通过Chrome(Windows)26.0.1410.64版进行了测试

但是，要尝试的几件事:

删除标记zIndex，您是否有意将其隐藏在下面？请参阅:zIndex -20

删除fillOpacity

您说过移动 map 可以将其显示出来吗？您已经在做map.setCenter();但是还不够吗？您也可以在添加标记时触发 map 事件之一，因此无需移动它，例如:google.maps.event.trigger(map, 'drag');

如果将所有标记存储在数组中并在添加新标记时循环遍历怎么办？并触发他们的google.maps.event.trigger(marker, 'icon_changed');

使用具有相同代码的png并查看问题是否仅限于svg

这是 JS fiddle ，我在其中尝试了一些此类操作。

编辑:

经过几次测试后，我注意到使用 map.panTo(latLng);而不是 map.setCenter(latLng);可以正确绘制SVG标记。另外，如果您不希望平移到中心，则使用 map.panBy(x, y);作为1像素，然后(快速)返回到先前的中心可能具有解决此问题的相似效果。

这是 JS fiddle ，可以看到实际效果。