javascript Google 地图：多边形和标记 Z-Index
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15627325/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps: Polygon and Marker Z-Index
提问by Nicolas
I have a Google Map with many markers (yellow circles), and I implemented a tool to draw polygons over the markers. However, the polygon is behind the markers while drawing (and stays behind when complete).
我有一个带有许多标记（黄色圆圈）的谷歌地图，我实现了一个工具来在标记上绘制多边形。但是，多边形在绘制时位于标记后面（并在完成时留在后面）。
I tried changing the ZIndex in both markers and polygons, but it seems to alter the way in which markers are shown with respect to other markers, and not with respect to polygons. I also tried
我尝试更改标记和多边形中的 ZIndex，但它似乎改变了标记相对于其他标记的显示方式，而不是相对于多边形。我也试过
polygon.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
How can I bring the polygon to the front?
我怎样才能把多边形带到前面？
回答by Michael Geary
This won't solve the problem, but it will explain why the things you tried didn't work.
这不会解决问题，但它会解释为什么您尝试的方法不起作用。
The Maps API uses several layers known as MapPanesin a fixed Z order:
Maps API以固定的 Z 顺序使用多个称为MapPanes 的层：
- 4: floatPane (infowindow)
- 3: overlayMouseTarget (mouse events)
- 2: markerLayer (marker images)
- 1: overlayLayer (polygons, polylines, ground overlays, tile layer overlays)
- 0: mapPane (lowest pane above the map tiles)
- 4：浮动窗格（信息窗口）
- 3：overlayMouseTarget（鼠标事件）
- 2：markerLayer（标记图像）
- 1：overlayLayer（多边形、折线、地面叠加、瓦片层叠加）
- 0：mapPane（地图图块上方的最低窗格）
So the marker images in layer 2 are always above the polygons in layer 1. When you fiddle with the z-index on the markers, you're just adjusting them relative to each other. That doesn't do any good, because they are all in a layer above the polygons.
因此，第 2 层中的标记图像始终位于第 1 层中的多边形上方。当您调整标记上的 z-index 时，您只是相对于彼此进行了调整。这没有任何好处，因为它们都在多边形上方的一层中。
What can you do about this? The only solution I can think of is to create your own OverlayViewfor the polygons or the markers so you can put them in the MapPane you want.
你能做些什么呢？我能想到的唯一解决方案是为多边形或标记创建自己的OverlayView，以便您可以将它们放入所需的 MapPane 中。
Are your markers clickable, or are they just static images? If they aren't clickable, you could possibly get away with drawing them yourself in the mapPane. Then your polygons would be above them. Or the opposite: you could draw the polygons yourself in one of the higher layers, maybe in floatShadow.
您的标记是可点击的，还是只是静态图像？如果它们不可点击，您可以自己在mapPane. 那么你的多边形就会在它们上面。或者相反：您可以自己在较高层之一中绘制多边形，也许在floatShadow.
The problem then is you have to do all of your own drawing, either with a canvaselement or with DOM images. And your own mouse hit testing too if they are clickable.
那么问题是您必须自己进行所有绘图，无论是使用canvas元素还是使用 DOM 图像。如果它们可点击，您自己的鼠标点击测试也是如此。
There aren't a lot of good OverlayViewexamples out there, but I'll mention one of my own: a little library I wrote a while ago called PolyGonzo, where the polygonzo.jsfile has the OverlayViewimplementation. The code isn't great - I threw it together in too much of a hurry - but it may help give you some ideas.
那里没有很多好的OverlayView例子，但我会提到我自己的一个：我不久前写的一个名为PolyGonzo的小库，其中的polygonzo.js文件有OverlayView实现。代码不是很好 - 我太匆忙地把它放在一起 - 但它可能有助于给你一些想法。
回答by Manuel Lopera
I know this question is old but for future users I wanna share my approach:
我知道这个问题很老，但对于未来的用户，我想分享我的方法：
Shapes with higher zIndexvalues displaying in front of those with lower values. For this example I am using Polygon but is similar for other shapes:
具有较高zIndex值的形状显示在具有较低值的形状之前。在这个例子中，我使用的是多边形，但其他形状也类似：
var globalZIndex = 1; //Be sure you can access anywhere
//... Other instructions for creating map, polygon and any else
polygon.setOptions({ zIndex: globalZIndex++ });
Notice that markers have a method setZIndex(zIndex:number).
请注意，标记有一个方法setZIndex(zIndex:number)。
回答by Mourad MAMASSI
I found this solution
我找到了这个解决方案
To Create a Symboluse this code below
要创建符号，请使用下面的代码
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
});
}
And to Create a Flow Markertry this code
并创建一个流标记试试这个代码
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
});
}
This is my result
这是我的结果
回答by fixer
Change this method call:
更改此方法调用：
polygon.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
to this:
对此：
polygon.setZIndex(4);
