谷歌地图API V3 SVG标记消失(Google Maps API v3 SVG markers

我使用SVG路径表示法来创建使用谷歌地图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经过一些时间（一些标记消失，当我放大它们出现），只有dissappears如果我做这个标记拖拽元素。

我尝试这样做：map.panTo（map.getCenter（））; 设置标记拖拽元素后

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

这似乎在th V3实现中的错误。米格尔

Answer 3:

我有一种同样的麻烦。约10 100标志物在启动显示。缩放，然后进行平移或每标记要么glitched或隐藏。

找出它的图标文件的SVG加价是造成了麻烦。

车用：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">

修正了：

<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">

Answer 4:

感谢您的@MaunoVähä答案“哑剧”！

我还设置“优化：假”。伟大的作品。

下面是一个使用动画SVG文件我的代码：

var marker;
var map;

var image = {
    url: "http://localhost:8080/images/animarker.svg",
    size: new google.maps.Size(100, 100),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(42, 42),
    scaledSize: new google.maps.Size(100, 100)
};

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 17,
        center: {lat: 59.325, lng: 18.070}
    });

    marker = new google.maps.Marker({
        map: map,
        icon: image,
        draggable: false,
        optimized: false,
        position: {lat: 59.327, lng: 18.067}
    });
}