Google地圖：多邊形和標記Z-Index

Question

我有一個帶有多個標記（黃色圓圈）的Google Map，並且我實現了一個工具在標記上繪製多邊形。但是，多邊形在繪製時位於標記之後（並且在完成時保留在後面）。

我想在這兩個標記和多邊形改變Z-索引，但它似乎改變其標記顯示相對於其他標記的方式，而不是相對於多邊形。我也試過

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

我怎樣才能把多邊形帶到前面？

Answer 1

這不會解決問題，但它會解釋爲什麼你嘗試的東西不起作用。

地圖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文件具有OverlayView實施。代碼不是很好 - 我把它扔在一起太急 - 但它可能會幫助你給你一些想法。

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

最後，這是我的結果