Google Maps API v3 SVG标记消失-Java 学习之路

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

SVG markers stop showing after adding a few

SVG markers show again after pan

这种情况发生在FF，Safari，Chrome和iPhone浏览器中 .

Here is my code for the polyline:

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

And the code for the SVG marker:

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 上时会消失吗？提前致谢 .

Here is a fiddle where you can reproduce the problem: http://jsfiddle.net/upsidown/gNQRB/

Here is a YT video to illustrate the issue: https://www.youtube.com/watch?v=uGAiwAuasmU

Edit:

已在Google创建 bug report ：http://code.google.com/p/gmaps-api-issues/issues/detail?id=5351

5 回答

我有同样的麻烦 . 发射时显示约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">

回复于 2024-04-29T07:07:43+08:00

17
适用于我，使用Chrome（Windows）版本26.0.1410.64进行测试

但是，要尝试的东西很少：
- 删除标记zIndex，你故意试图隐藏它吗？见： zIndex -20
- 删除fillOpacity
- 你说移动 Map 会让它变得可见吗？你已经在做map.setCenter（）;但还不够？您可以选择在添加标记时触发其中一个 Map 事件，这样您就不需要移动它，例如： google.maps.event.trigger(map, 'drag');
- 如果将所有标记存储在数组中并在添加新标记时将其循环，该怎么办？并触发他们的 google.maps.event.trigger(marker, 'icon_changed');
- 使用具有相同代码的png并查看问题是否仅适用于svg
这是 JS fiddle 我尝试了其中的一些东西 .

Edit:

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

这是 JS fiddle 看到它在行动 .
回复于 2024-04-29T07:07:43+08:00
1

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

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

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

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

回复于 2024-04-29T07:07:43+08:00

感谢@MaunoVähä回答的“panTo”！

我也设置“优化：假” . 效果很好 .

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

回复于 2024-04-29T07:07:43+08:00

1

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

使用tomchentw / react-google-maps有同样的问题 . 在onMapIdle（）中使用panBy（0,0）修复了问题 . 如果您没有使用包我假设添加一个 Map 'idle'事件监听器与panBy（0,0）将工作 .

回复于 2024-04-29T07:07:43+08:00

Google Maps API v3 SVG标记消失

5 回答

相关问题