Google Maps API v3 SVG标记消失 [英] Google Maps API v3 SVG markers disappear

问题描述

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

添加几个

SVG标记在平移后再次显示

这发生在FF，Safari，Chrome和iPhone浏览器中。

以下是我的折线代码：

  var lineSymbol = {
路径：g.SymbolPath.FORWARD_OPEN_ARROW，
比例：1.5 
}; 
 
 polyOptions = {
 strokeColor：'＃0026b3'，
 strokeOpacity：1.0，
 strokeWeight：1，
 geodesic：true，
图标：[{
图标：lineSymbol，
重复：'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：新g.Point（70.085,120.362），
 strokeWeight：0，
比例：.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

解决方案

适用于我，通过Chrome（Windows）版本26.0.1410.64测试

然而，很少有事情要做：

• 删除marker zIndex ，你故意试图隐藏它吗？请参阅： zIndex -20


• 移除fillOpacity


• 可见？你已经在做 map.setCenter（）; 但它不够？当你添加标记时你可以选择触发地图事件之一，所以你不需要移动它，例如： google.maps.event.trigger（map，'drag'）;


• 如果您将所有标记存储在数组中，并在添加新数组时将其循环，那该怎么办？并触发它们的 google.maps.event.trigger（marker，'icon_changed'）;


• 使用带有相同代码的png并查看是否问题仅限于svg

以下是 JS小提琴 / p>

经过多次测试，我注意到使用 map.panTo（latLng）; 而不是 map .setCenter（latLng）; 使SVG标记正确绘制。或者，如果您不想平移居中，则使用 map.panBy（x，y）; 作为1个像素，然后返回到上一个中心（快速）可能会产生类似的效果解决这个问题。

这是 JS小提琴 看到这一点。

I am using SVG path notation to create markers along with a polyline using Google Maps API v3. Sometimes, after adding a few markers, they just stop showing from the map. If I pan the map, even just 1px, they show again.

SVG markers stop showing after adding a few

SVG markers show again after pan

This happens in FF, Safari, Chrome and iPhone browsers.

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

Any idea why my markers just vanish when they actually are on the map? Thanks in advance.

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:

A bug report has been created at Google: http://code.google.com/p/gmaps-api-issues/issues/detail?id=5351

解决方案

Works for me, tested with Chrome (Windows) Version 26.0.1410.64

However, few things to try out:

• Remove marker zIndex, you are purposely trying to hide it under? see: zIndex -20
• Remove fillOpacity
• You said that moving map brings it to visible? You are already doing map.setCenter(); but its not enough? you could alternatively trigger one of the map events when you add marker so you dont need to move it, like : google.maps.event.trigger(map, 'drag');
• What if you store all markers inside array and loop them through when new one is added? and trigger their google.maps.event.trigger(marker, 'icon_changed');
• Use pngs with same code and see if problem is with svg only

Here is JS fiddle where I tried some of these things.

Edit:

After several tests I noticed that using map.panTo(latLng); instead of map.setCenter(latLng); makes SVG markers to draw correctly. Alternatively, if you dont want to pan to center, using map.panBy(x, y); as 1 pixel and then back to previous center (fast) might have similar effect of solving this problem.

Here is JS fiddle to see that in action.

这篇关于Google Maps API v3 SVG标记消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！