20

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

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

平移后再次显示 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

4

2 回答 2

17

对我有用，用 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以查看实际情况。

于 2013-05-04T17:09:53.357 回答
5

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

我试过这个：

map.panTo(map.getCenter());

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

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

于 2013-11-19T13:14:58.143 回答