Google maps api 3 谷歌地图API v3 SVG标记消失

我正在使用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);

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
});

以及SVG标记的代码：

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);

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
});

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

这里有一把小提琴，你可以在这里重现问题：

这里有一段YT视频来说明这个问题：

编辑：

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);

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
});

---

一个错误报告已经在Google上创建：

适合我，用Chrome（Windows）26.0.1410.64版进行测试

但是，要尝试的东西很少：

• 移除标记zIndex，你是故意想把它藏起来？参见：

  zIndex-20

• 去除不透明度
• 你说移动地图会使它可见？您已经在执行map.setCenter（）；但这还不够吗？您也可以在添加标记时触发其中一个映射事件，这样就不需要移动它，例如：

  google.maps.event.trigger（映射“拖动”）

• 若将所有标记存储在数组中，并在添加新标记时循环它们，会怎么样？并触发他们的

  google.maps.event.trigger（标记“icon_changed”）

• 将PNG与相同的代码一起使用，查看问题是否仅限于svg

这里是我尝试这些东西的地方

编辑：

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);

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.panTo（latLng）而不是
地图设置中心（latLng）使SVG标记正确绘制。或者，如果您不想平移到中心，请使用
map.panBy（x，y）为1像素，然后返回到上一个中心（fast）可能具有解决此问题的类似效果

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

我试过这个：

map.panTo(map.getCenter()); 

设置标记后可拖动。现在它工作得很好

这似乎是V3实现中的一个bug。
您是否有一个JSFIDLE（或指向映射的链接）来显示问题？是的。我在我的问题上加了一把小提琴，我可以在那里重现这个问题。有人知道吗？我觉得我遇到了一个错误，或者一定是我做错了什么，但是什么呢。我可以试试，但是zIndex-20在我的应用程序2中是有用途的。我试试看。不可以。在最后添加的航路点上居中与否没有区别。这个错误仍然存在。4.你能澄清一下吗？5.这是我以前使用过的，我认为到那时问题还没有出现，但我会再试一次。我现在使用Mac OS X 10.7.5，我可以用Chrome版本26.0.1410.65重现这个问题。很高兴这能有所帮助，希望他们能用即将发布的版本解决这个问题；）这个答案是救命稻草。谢谢，非常感谢！我也遇到了同样的问题，而潘托似乎也做到了！这有点蹩脚，谷歌只是引用了stackoverflow的解决方案，而不是实际修复了这个bug。非常感谢你发布这篇文章。我遇到了一个问题，在调用map.fitBounds（）之后，我的许多带有标签的地图标记在拖动地图之前不会呈现。即使在fitBounds（）完全完成后添加贴图标记（带标签），也会发生这种情况。即使只是在现有标记上设置标签，也会发生这种情况。只要在调用map.fitBounds（）后添加map.panTo（map.getCenter（））就可以解决这个问题。