Question

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

Active polygon drawing tool beneath the markers.

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

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

如何将多边形带到前面？

Answer 1

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

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

4：floatPane（infowindow）
3：overlayMouseTarget（鼠标事件）
2：markerLayer（标记图像）
1：overlayLayer（多边形，折线，地面叠加，切片图层叠加）
0：mapPane（地图图块上方的最低窗格）

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

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

您的标记是否可点击，或者它们只是静态图像？如果它们不可点击，您可能会在mapPane中自行绘制它们。那么你的多边形将在它们之上。或者恰恰相反：您可以在其中一个较高层中绘制多边形，可能在floatShadow中。

问题是你必须使用canvas元素或DOM图像来完成所有自己的绘图。如果它们是可点击的，你自己的鼠标也会受到测试。

那里没有很多好的OverlayView例子，但我会提到我自己的一个：我刚才写的一个名为PolyGonzo的小图书馆，{{3}文件具有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);

Google地图：多边形和标记Z-Index

4 个答案: