如何使用Google-Maps-Api-3繪製多個多邊形？

Question

我想繪製多個多邊形迭代到谷歌地圖。這是我到目前爲止：

var map; 
var infoWindow; 
var bermudaTriangle = new Array(); 


// Angular controllers etc 


function initialize() { 

    // map options 
    var mapOptions = { 
    zoom: 20, 
    center: new google.maps.LatLng(52.081336668, 5.124039573), 
    mapTypeId: google.maps.MapTypeId.TERRAIN 

    }; 


    // initialize 
    //var bermudaTriangle; 
    var bounds = new google.maps.LatLngBounds(); 


    // define map 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

    // ************** POLYGON 1 ************************************************** 

    // Define the LatLng coordinates for the polygon. 
    //var coorArray = [[[25.774252, -80.190262],[18.466465, -66.118292],[32.321384, -64.75737],[25.774252, -80.190262]]]; 

    var coorArray = [[[5.129820025,52.085407733],[5.129117875,52.086181679],[5.128497179,52.087946286],[5.128458022,52.088253322],[5.12866837,52.088507157],[5.129251266,52.088976802],[5.129473861,52.08926905],[5.129385309,52.089499203],[5.12909759,52.089698198],[5.127961124,52.090148712],[5.127685173,52.090462912],[5.127310682,52.091653473],[5.12710699,52.092271708],[5.127126612,52.092518366],[5.128237531,52.093468305],[5.128130926,52.093688728],[5.126525853,52.094399058],[5.126377274,52.09459342],[5.126284571,52.095035437],[5.130996578,52.095312264],[5.137138625,52.095591962],[5.139036247,52.095628598],[5.138962372,52.095484813],[5.137879856,52.093651573],[5.137480747,52.093048367],[5.136997815,52.092468872],[5.13643473,52.091917507],[5.135795776,52.091398471],[5.134288171,52.090401311],[5.133608279,52.089984575],[5.133259679,52.089768435],[5.132932239,52.089549796],[5.132656508,52.089342179],[5.132411195,52.089120552],[5.132198186,52.088886599],[5.132143714,52.088818019],[5.130950838,52.087097103],[5.130737143,52.086736442],[5.130575274,52.086365674],[5.130403794,52.085570404],[5.129783706,52.08522338],[5.129820025,52.085407733]]]; 

    var triangleCoords = new Array(); 
    var element1; 
    var element2; 

    for (i = 0; i < coorArray[0].length; i++) { 
     element1 = coorArray[0][i][1]; 
     element2 = coorArray[0][i][0]; 
     triangleCoords.push(new google.maps.LatLng(element1, element2)); 
    } 


    // Construct the polygon. 
    bermudaTriangle[0] = new google.maps.Polygon({ 
    paths: triangleCoords, 
    strokeColor: '#GG5555', 
    strokeOpacity: 0.8, 
    strokeWeight: 3, 
    fillColor: '#GG0000', 
    fillOpacity: 0.35 
    }); 


    // ************** POLYGON 2 ************************************************** 

    window.alert("size before: " + bermudaTriangle.length) 

    var coorArray2 = [[[5.124039573,52.081336668],[5.123786124,52.080881152],[5.122959636,52.079497242],[5.122391068,52.078743511],[5.121372746,52.079116894],[5.120311295,52.079552143],[5.119436465,52.080026204],[5.118998806,52.08030162],[5.118310391,52.080845197],[5.117645798,52.081565422],[5.115689749,52.083649376],[5.113520057,52.086009212],[5.114690896,52.086447262],[5.117083346,52.08727212],[5.117522428,52.086774053],[5.119780236,52.084249233],[5.12004402,52.08388896],[5.120586169,52.082807573],[5.121381599,52.08102804],[5.121656807,52.080836711],[5.12210523,52.080845396],[5.122882168,52.081123542],[5.123980025,52.081437992],[5.123982191,52.081434411],[5.124039573,52.081336668]]] 

    addNewPoly(coorArray2); 

    window.alert("size after: " + bermudaTriangle.length) 

    for(var i=0,l=bermudaTriangle.length;i<l;i++) { 
    bermudaTriangle[i].setMap(map); 

    // map.fitBounds(bounds); 


    // Add a listener for the click event. 
    google.maps.event.addListener(bermudaTriangle[i], 'click', showArrays); 

    infoWindow = new google.maps.InfoWindow(); 


    } 

function addNewPoly(coorArray2) { 

    var triangleCoords = new Array(); 
    var element1; 
    var element2; 

    window.alert("inside addNewPoly") 

    for (i = 0; i < coorArray[0].length; i++) { 
     element1 = coorArray[0][i][1]; 
     element2 = coorArray[0][i][0]; 
     triangleCoords.push(new google.maps.LatLng(element1, element2)); 
    } 

    // Construct the polygon. 
    bermudaTriangle[bermudaTriangle.length] = new google.maps.Polygon({ 
    paths: triangleCoords, 
    strokeColor: '#GG5555', 
    strokeOpacity: 0.8, 
    strokeWeight: 3, 
    fillColor: '#GG0000', 
    fillOpacity: 0.35 
    }); 

    return bermudaTriangle; 

    } 

    /** @this {google.maps.Polygon} */ 
function showArrays(event) { 

    // Since this polygon has only one path, we can call getPath() 
    // to return the MVCArray of LatLngs. 
    var vertices = this.getPath(); 

    var contentString = '<b>Bermuda Triangle polygon</b><br>' + 
     'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() + 
     '<br>'; 

    // Iterate over the vertices. 
    for (var i =0; i < vertices.getLength(); i++) { 
    var xy = vertices.getAt(i); 
    contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' + 
     xy.lng(); 
    } 

    // Replace the info window's content and position. 
    infoWindow.setContent(contentString); 
    infoWindow.setPosition(event.latLng); 

    infoWindow.open(map); 
    } 

} 

google.maps.event.addDomListener(window, 'load', initialize); 

基本上它只繪製第一個多邊形時，我這樣做。最好我會用AngularJS來做，但是現在我會滿意它是否適用於Javascript。

我從Google-Maps-API-3教程中提取了這個示例並解決了這個問題。

Answer 1

進入你的addNewPoly功能，您傳遞的是座標的數組，coorArray2：

function addNewPoly(coorArray2) 

但是你從來沒有使用它，你指的是coorArray：

for (i = 0; i < coorArray[0].length; i++) { 
    element1 = coorArray[0][i][1]; 
    element2 = coorArray[0][i][0]; 
    triangleCoords.push(new google.maps.LatLng(element1, element2)); 
} 

改變這一點，它應該工作

for (i = 0; i < coorArray2[0].length; i++) { 
    element1 = coorArray2[0][i][1]; 
    element2 = coorArray2[0][i][0]; 
    triangleCoords.push(new google.maps.LatLng(element1, element2)); 
}