Question

我使用SVG路径表示法使用Google Maps API v3创建标记以及折线。有时，添加几个标记后，它们就会停止从地图中显示。如果我平移地图，即使只是1px，它们也会显示出来。

添加一些后SVG标记停止显示 SVG markers stop showing after adding a few

在pan 后再次显示SVG标记 SVG markers show again after pan

这种情况发生在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

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 fiddle ，其中我尝试了其中的一些内容。

修改

经过多次测试后，我注意到使用map.panTo(latLng);代替map.setCenter(latLng);可以正确绘制SVG标记。或者，如果你不想平移到中心，使用map.panBy(x, y);作为1个像素然后回到前一个中心（快速）可能会有类似的效果来解决这个问题。

JS fiddle 可以看到这一点。

Answer 2

我在使用标记的png标记图标时遇到了同样的问题，有些时候在fitBounds之后（有些标记会消失并且在我放大时会出现），如果我将这些标记设置为可拖动，则只会消失。

我试过这个：map.panTo（map.getCenter（））;设置标记draggables后

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

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

Answer 3

我有同样的麻烦。发射时显示约100个标记。然后在缩放或平移之后，每个标记都要么是闪烁的，要么是隐藏的。

发现图标文件中的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ä的“panTo”回答！

我也设置“optimize：false”。效果很好。

以下是使用动画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}
    });
}

Answer 5

上面建议有人平移1个像素然后再次返回。这是panBy（0,0）也可以工作的一个优点，它具有更简单且没有视觉伪像的优点：

使用tomchentw / react-google-maps也遇到了相同的问题。在onMapIdle（）中使用panBy（0,0）解决了该问题。如果您不使用程序包，则假定可以使用panBy（0,0）添加地图“ idle”事件监听器。

Google Maps API v3 SVG标记消失

5 个答案: