Google Maps API v3 SVG 标记消失

Posted 2023-02-23

【中文标题】Google Maps API v3 SVG 标记消失

【英文标题】：Google Maps API v3 SVG markers disappear

【发布时间】：2013-04-25 09:17:55

【问题描述】：

我正在使用 SVG 路径表示法创建标记以及使用 Google Maps API v3 的折线。有时，添加一些标记后，它们就会停止从地图上显示。如果我平移地图，即使只是 1px，它们也会再次显示。

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

平移后再次显示 SVG 标记

这发生在 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
);

知道为什么我的标记实际上在地图上时就消失了吗？提前致谢。

这是一个可以重现问题的小提琴：http://jsfiddle.net/upsidown/gNQRB/

这是一个 YT 视频来说明这个问题：https://www.youtube.com/watch?v=uGAiwAuasmU

编辑：

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

【问题讨论】：

你有没有显示问题的 jsfiddle（或地图链接）？

是的。我在我的问题jsfiddle.net/upsidown/gNQRB 中添加了一个小提琴，我能够在那里重现该问题。

有人看这个吗？我觉得我遇到了一个错误或者一定是我做错了什么，但是什么？

【参考方案1】：

为我工作，使用 Chrome (Windows) 版本 26.0.1410.64 测试

但是，有几件事可以尝试：

删除标记zIndex，你是故意想把它隐藏在下面吗？见：zIndex -20 移除填充不透明度 您说移动地图可以使其可见？你已经在做 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 以了解实际情况。

【讨论】：

1.我可以尝试一下，但是是的，zIndex -20 在我的应用程序中有一个目的 2. 会尝试 3. 不。无论是否以最后添加的航点为中心都没有区别。该错误仍然存​​在。 4. 你能澄清一下吗？ 5.我之前用的就是这个，到时候估计没有出现问题了，不过我会再试试的。

我使用的是 Mac OS X 10.7.5，我可以使用 Chrome 版本 26.0.1410.65 重现该问题

很高兴能帮上忙，希望他们在即将发布的版本中解决这个问题；）

这个答案是救命稻草。谢谢。

非常感谢！我也遇到了同样的问题，panTo 似乎成功了！谷歌只是引用***解决方法关闭了该错误，而不是实际修复该错误，这有点蹩脚。

【参考方案2】：

我在使用 png 标记图标作为标记时遇到了同样的问题，有时在 fitBounds 之后（一些标记会消失，当我放大时它们会出现）并且只有当我将此标记设为可拖动时才会消失。

我试过这个：

map.panTo(map.getCenter()); 

设置标记后可拖动。现在它工作正常。

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

【讨论】：

非常感谢您发布此信息。我遇到了一个问题，在调用 map.fitBounds() 之后，我的许多带有标签集的地图标记在地图被拖动之前不会呈现。即使在 fitBounds() 完全完成后添加地图标记（带标签）也会发生这种情况。即使只是在现有标记上设置标签，也会发生这种情况。在对 map.fitBounds() 的任何调用后只需添加 map.panTo(map.getCenter()) 即可解决问题。