Question

当我使用不同的图标类型向Google地图添加更多标记时，如：

...
var marker = new google.maps.Marker({
             position: markerLatLng,
             map: map,
             icon: "http://www.test.com/marker.png",
             zIndex: 10
         });
...

和

...
var resultIcon = {
            path: google.maps.SymbolPath.CIRCLE,
            fillColor: "black",
            strokeColor: "black",
            strokeWeight: 1,
         };

var marker = new google.maps.Marker({
             position: markerLatLng,
             map: map,
             icon: resultIcon,
             zIndex: 5
         });
...

比zIndex不起作用，符号标记出现在顶部。

我的代码错了，或者如何使zIndex工作？

Answer 1

您必须同时指定zIndex并添加

optimized: false

到每个标记构造函数，例如

var marker = new google.maps.Marker({
    position: markerLatLng,
    map: map,
    icon: resultIcon,
    optimized: false,
    zIndex: 5
})

这似乎是基于新的基于画布的标记渲染的一个问题。

修改

这确实解决了这个问题。但值得一提的是，每个标记都必须具有“optimized：false”属性。只要一个标记没有它，它就不起作用。

从LeJared的小提琴中删除任何“optimized：false”属性，你会遇到这个错误。

http://jsfiddle.net/BNWYq/1/

Answer 2

将圆圈的索引设置为-99似乎有助于：http://jsfiddle.net/rq4vs/2/

Answer 3

我做了一点小事： http://jsfiddle.net/gSRmV/

看起来像是一个必须由谷歌修复的错误。

~~添加optimized: false不会改变任何内容。~~

编辑仍然看起来像bug，但tborychowski和Codetoffel的两个解决方案似乎都有效。

google.maps.Marker zIndex不适用于两种图标类型 - 符号和字符串

3 个答案: