Google Maps API v3 SVG标记消失

Question

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

编辑:

一个bug报告已在谷歌创建了: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.setCenter(); 但还不够？您可以选择在添加标记时触发其中一个地图事件,这样您就不需要移动它,例如:google.maps.event.trigger(map, 'drag');
• 如果将所有标记存储在数组中并在添加新标记时将其循环,该怎么办？并触发他们的google.maps.event.trigger(marker, 'icon_changed');
• 使用具有相同代码的png并查看问题是否仅适用于svg

这是JS小提琴,我尝试了其中的一些东西.

编辑:

经过几次测试后,我注意到使用map.panTo(latLng);而不是map.setCenter(latLng);使SVG标记正确绘制.或者,如果您不想平移到中心,使用map.panBy(x, y);1像素然后返回到前一个中心(快速)可能会有类似的效果来解决此问题.

这是JS小提琴,看看它在行动.

Answer 2

我有同样的问题,使用png标记图标作为标记,有些时候在fitBounds之后(一些标记消失,它们在我放大时出现)并且只有在我使这个标记可拖动时才会消失.

我试过这个:map.panTo(map.getCenter()); 设置标记draggables后

现在它工作正常. http://www.mapgolfcourse.com/view/2.php?card=no

这似乎是V3实施的一个错误.米格尔