我有一个Google地图，上面有许多标记（黄色圆圈），并且我实现了一个可以在标记上绘制多边形的工具。然而，在绘制时多边形会被标记遮挡住（完成后也是如此）。
我尝试过同时更改标记和多边形的ZIndex，但这似乎只会改变标记与其他标记之间的显示方式，并不会影响标记与多边形之间的显示关系。我还尝试过
polygon.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
我该如何将多边形移至最前面？
谷歌地图：多边形和标记的 Z-Index
36
- Nicolas
1
你可以尝试使用叠加层。我没有使用过谷歌的API，但我可以教你在必应地图中如何实现。 - Corey Ogburn
4个回答
75
这并不能解决问题，但它可以解释为什么你尝试的方法没有奏效。
地图 API 使用几个称为 MapPanes 的层，按照固定的 Z 顺序：
- 4: floatPane（信息窗口）
- 3: overlayMouseTarget（鼠标事件）
- 2: markerLayer（标记图像）
- 1: overlayLayer（多边形、折线、地面覆盖物、瓦片层覆盖物）
- 0: mapPane（高于地图瓦片的最低层）
因此，在第 2 层的标记图像始终在第 1 层的多边形之上。当您调整标记的 z-index 时，只是相对于彼此进行调整。这没有任何好处，因为它们都在多边形上方的一层中。
你能做些什么呢？我能想到的唯一解决办法是为多边形或标记创建自己的 OverlayView，这样你就可以将它们放在想要的 MapPane 中。
你的标记是否可点击，还是只是静态图像？如果它们不可点击，你可能可以在mapPane 中自己绘制它们。然后你的多边形就会在它们上面。或者相反：你可以在更高的层中自己绘制多边形，比如在 floatShadow 中。然后问题就在于你必须自己进行所有的绘制，使用
canvas 元素或 DOM 图像。如果它们是可点击的，你还需要进行自己的鼠标命中测试。没有太多好的
OverlayView 示例，但我会提到我自己的一个：我写了一个叫做 PolyGonzo 的小库，其中 polygonzo.js 文件有 OverlayView 实现。代码不是很好 - 我匆忙地把它拼凑起来了 - 但它可能会帮助你想出一些主意。- Michael Geary
4
感谢您的答复。标记是可点击的，而多边形是由用户绘制的，这就是我想使用google.maps.drawing库的原因。 - Nicolas
1糟糕。是的，他们将多边形放入“overlayLayer”中的方式使它变得棘手。你要么必须实现自己的多边形，要么实现自己的标记。这里没有简单的解决方案。你可以实现自己的标记，并将它们放在“mapLayer”中，与“overlayMouseTarget”层中的匹配透明元素进行鼠标命中测试。 - Michael Geary
1部分透明标记可能是一个可行的妥协方案，允许在标记下看到底层多边形。虽然不完美，但使用自定义 .png 图像非常简单。 - Beetroot-Beetroot
@MichaelGeary 非常感谢您！！节省了我的时间。 - SohailRajput
5
我知道这个问题很老，但为了未来的用户，我想分享我的方法：
具有较高 zIndex 值的形状会显示在具有较低值的形状前面。对于此示例，我正在使用多边形，但对于其他形状也是类似的：
var globalZIndex = 1; //Be sure you can access anywhere
//... Other instructions for creating map, polygon and any else
polygon.setOptions({ zIndex: globalZIndex++ });
请注意标记具有一个名为setZIndex(zIndex:number)的方法。
- Manuel Lopera
3
修复：setZIndex（number） - Zhenya
2这不起作用。标记始终位于多边形和折线之上。 - ESP32
这与原问题无关。 - MrUpsidown
-2
我找到了这个解决方案
创建一个符号，请使用下面的代码
创建一个符号，请使用下面的代码
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeColor: '#181727',
fillColor: '#50040B',
};
var dashedSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
};
[![function MakeMarker(pinColor){
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
return pinImage;
}][1]][1]
FlowMarkersdashed(new google.maps.LatLng(positionorigin[0], positionorigin[1]),
new google.maps.LatLng(positiondestination[0], positiondestination[1]), myObject[i]['flowfluxphysique'][j]['colorFlux'], dashedSymbol, j);
function FlowMarkersdashed(latlngOrgin, latlngDest, ColorFlow, Symbol, indexvar){
var flightPlanCoordinates = [
latlngOrgin,
{lat: latlngOrgin.lat() + (indexvar) * 2, lng: latlngOrgin.lng()},
// {lat: -18.142, lng: 178.431},
latlngDest,
];
var line = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeOpacity: 0,
icons: [{
icon: Symbol,
// offset: '100%',
offset: '0',
repeat: '20px'
// repeat: '20px'
}],
strokeColor: "#"+ColorFlow,
geodesic: true,
// editable: true,
map: map
});
}
要创建一个流程标记，请尝试使用以下代码
FlowMarkers(new google.maps.LatLng(positionorigin[0], positionorigin[1]),
new google.maps.LatLng(positiondestination[0], positiondestination[1]), myObject[i]['flowfluxinformation'][j]['colorFlux'], lineSymbol,j);
function FlowMarkersdashed(latlngOrgin, latlngDest, ColorFlow, Symbol, indexvar){
var flightPlanCoordinates = [
latlngOrgin,
{lat: latlngOrgin.lat() + (indexvar) * 2, lng: latlngOrgin.lng()},
// {lat: -18.142, lng: 178.431},
latlngDest,
];
var line = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeOpacity: 0,
icons: [{
icon: Symbol,
// offset: '100%',
offset: '0',
repeat: '20px'
// repeat: '20px'
}],
strokeColor: "#"+ColorFlow,
geodesic: true,
// editable: true,
map: map
});
}
这是我的结果
- Mourad MAMASSI
1
1这怎么能提供任何对原问题的解决方案呢？ - MrUpsidown
-3
更改此方法调用：
polygon.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
转换为：
polygon.setZIndex(4);
- fixer
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接