Google Maps API v3的SVG标记消失

Question

Google Maps API v3的SVG标记消失

google-maps-api-3svggoogle-maps-markersgoogle-polyline

20

我正在使用SVG路径符号与Google Maps API v3一起创建标记和折线。有时，在添加了几个标记后，它们就不再显示在地图上。如果我移动地图，即使只是1像素，它们也会重新显示。

在添加几个标记后，SVG标记停止显示

移动地图之后，SVG标记再次显示

这在Firefox、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
});

任何想法为什么我的标记在地图上实际存在时会突然消失？提前感谢。

这里有一个示例链接可以重现问题：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。

- MrUpsidown

你有一个 jsfiddle（或者一个显示问题的地图链接）吗？ - geocodezip

是的。我在我的问题中添加了一个 JSFiddle(http://jsfiddle.net/upsidown/gNQRB/)，并且我能够在那里重现这个问题。 - MrUpsidown

有人在吗？我觉得我遇到了一个 bug 或者是我做错了什么，但是具体是什么呢？ - MrUpsidown

2个回答

5

我曾经在使用png标记图标作为标记时遇到相同的问题，有些标记在fitBounds后会消失，并且只有当我放大地图时才会出现，仅当我将这些标记设置为可拖动时才会消失。

我尝试了以下方法:

map.panTo(map.getCenter());

在设置标记拖动器之后，现在它可以正常工作了。

这似乎是V3实现中的一个错误。

- Miguel Perez Subias

非常感谢您发布这篇文章。我遇到了一个问题，即在调用map.fitBounds()后，我的许多带有标签的地图标记直到拖动地图才会渲染出来。即使在完全完成fitBounds()之后添加地图标记（带有标签），也会发生这种情况。即使只是在现有标记上设置标签，也会发生这种情况。只需在任何对map.fitBounds()的调用之后添加map.panTo(map.getCenter())即可解决此问题。 - Brett Birschbach

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mauno Vähä · Accepted Answer

在Chrome (Windows) Version 26.0.1410.64上测试通过。

不过，有几件事情可以尝试：

删除标记zIndex，你是故意想将其隐藏吗？参见：zIndex -20
删除fillOpacity
你说移动地图会使其可见？你已经使用map.setCenter();但这还不够吗？你可以在添加标记时触发地图事件之一，这样你就不需要移动它，例如：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，可以看到它在实际中的应用。