在Google Maps API下方添加新的多邊形

我有一個Google.Map對象，其中有一組多邊形和多段線已經在其上顯示。在Google Maps API下方添加新的多邊形

我想補充一點，應該顯示下面所有元素（或多或少像一個「背景」多邊形）一個新 google.maps.Polygon對象。

我試圖用一個荒謬的低zIndex值（-999999）添加它，但它仍然顯示高於所有其他元素。

這是我迄今所做的：

  whiteBackground = new google.maps.Polygon({ 
       path: [ {lat:40.1, lng:-97.1}, 
         {lat:40.1, lng:-89.8}, 
         {lat:44.5, lng:-89.8}, 
         {lat:44.5, lng:-97.1} ], 
       strokeColor: "#FF0000", 
       fillColor: "#FFFFFF", 
       strokeOpacity: 1.0, 
       strokeWeight: 1.5, 
       fillOpacity: 1.0, 
       zIndex: -999999 
      }); 

      // add to map and to list 
      whiteBackground.setMap(my_map);

有沒有辦法迫使新的多邊形whiteBackground有在Google.Map其所要去最小 zIndex的值加入？

或者有沒有辦法讓遍歷 Google.Map對象中的所有當前元素？

來源

2015-10-19 André Della Libera Zanchetta

請提供[最小，完整，測試和可讀示例]（http://stackoverflow.com/help/ mcve），證明了這個問題。你爲什麼設置zIndex爲其他多邊形？ – geocodezip

我不知道是否將zIndex設置爲其他多邊形（它們是由另一個縮小的代碼生成的）。 –

如果您設置了所有多邊形的zIndex屬性，它將起作用。

proof of concept fiddle (moves smaller polygon above/below larger polygon on click of the button)

代碼片斷：

// This example creates a simple polygon representing the Bermuda Triangle and a small polygon that starts above it, toggles above/below by clicking the button (large polygon has zIndex=0; small polygon is +/-1. 
 

 
var map; 
 
var infoWindow; 
 
var poly2; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 5, 
 
    center: { 
 
     lat: 24.886, 
 
     lng: -70.268 
 
    }, 
 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    }); 
 
    // Define the LatLng coordinates for the polygon. 
 
    var triangleCoords = [{ 
 
    lat: 25.774, 
 
    lng: -80.190 
 
    }, { 
 
    lat: 18.466, 
 
    lng: -66.118 
 
    }, { 
 
    lat: 32.321, 
 
    lng: -64.757 
 
    }]; 
 

 
    // Construct the polygon. 
 
    var bermudaTriangle = new google.maps.Polygon({ 
 
    paths: triangleCoords, 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 0.8, 
 
    strokeWeight: 3, 
 
    fillColor: '#FF0000', 
 
    fillOpacity: 0.35, 
 
    zIndex: 0 
 
    }); 
 
    bermudaTriangle.setMap(map); 
 

 
    var poly2Coords = [{ 
 
    lat: 26.78484736105119, 
 
    lng: -72.24609375 
 
    }, { 
 
    lat: 27.059125784374068, 
 
    lng: -68.8623046875 
 
    }, { 
 
    lat: 23.926013339487024, 
 
    lng: -71.806640625 
 
    }]; 
 

 
    poly2 = new google.maps.Polygon({ 
 
    paths: poly2Coords, 
 
    strokeColor: '#0000FF', 
 
    strokeOpacity: 0.8, 
 
    strokeWeight: 3, 
 
    fillColor: '#FF0000', 
 
    fillOpacity: 0.35, 
 
    zIndex: 1 
 
    }); 
 
    poly2.setMap(map); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initMap);

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map { 
 
    height: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="info"></div> 
 
<input id="btn" type="button" value="click" onclick="if (poly2.get('zIndex') > 0) poly2.setOptions({zIndex:-1}); else poly2.setOptions({zIndex:1});" /> 
 
<div id="map"></div>

來源

2015-10-19 23:47:22 geocodezip

在Google Maps API下方添加新的多邊形

回答

相關問題