javascript - 谷歌地图：多边形和标记 Z 索引

Question

我有一个带有许多标记（黄色圆圈）的谷歌地图，我实现了一个在标记上绘制多边形的工具。但是，多边形在绘制时位于标记的后面（完成时留在后面）。

我尝试在标记和多边形中更改 ZIndex，但它似乎改变了标记相对于其他标记的显示方式，而不是相对于多边形。我也试过

polygon.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);

如何将多边形带到前面？

Answer 1

这不会解决问题，但它会解释为什么你尝试的东西不起作用。

Maps API以固定的 Z 顺序使用多个称为MapPanes的层：

• 4：浮动窗格（信息窗口）
• 3：overlayMouseTarget（鼠标事件）
• 2：markerLayer（标记图像）
• 1：overlayLayer（多边形、折线、地面叠加层、瓦片层叠加层）
• 0：mapPane（地图图块上方的最低窗格）

因此，第 2 层中的标记图像始终位于第 1 层中的多边形之上。当您调整标记上的 z-index 时，您只是在相对于彼此调整它们。这没有任何好处，因为它们都在多边形上方的一层中。

你能做些什么呢？我能想到的唯一解决方案是为多边形或标记创建自己的OverlayView，这样你就可以将它们放在你想要的 MapPane 中。

您的标记是可点击的，还是只是静态图像？如果它们不可点击，您可以自己在mapPane. 然后你的多边形将在它们之上。或相反：您可以自己在较高层之一中绘制多边形，也许在floatShadow.

canvas那么问题是您必须使用元素或 DOM 图像进行所有自己的绘图。如果它们是可点击的，你自己的鼠标点击测试也是如此。

那里没有很多好的OverlayView例子，但我会提到我自己的一个：我不久前编写的一个名为PolyGonzo的小库，其中的polyGonzo.js文件有OverlayView实现。代码不是很好——我太匆忙把它放在一起——但它可能有助于给你一些想法。

Answer 2

我知道这个问题很老，但对于未来的用户，我想分享我的方法：

具有较高zIndex值的​​形状显示在具有较低值的形状前面。对于此示例，我使用的是 Polygon，但其他形状也类似：

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

Answer 3

我找到了这个解决方案

要创建符号，请使用下面的代码

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

这是我的结果

Answer 4

更改此方法调用：

polygon.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);  

对此：

polygon.setZIndex(4);