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

Question

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

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

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

如何将多边形放在前面？

Answer 1

这不会解决问题，但会解释为什么您尝试的方法不起作用。

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

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

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

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

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

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

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

Answer 2

更改此方法调用：

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

到这里：

polygon.setZIndex(4);

Answer 3

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

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

Answer 4

我找到了这个解决方案

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

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

这是我的结果