如何在多個多邊形Google地圖V3中填充不同的顏色？

Question

我嘗試構建具有多個多邊形的地圖，但當我組合顏色時出現問題。

我做了5個多邊形和我填5種顏色，但結果是隻顯示2種顏色。

示例代碼：

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


// Angular controllers etc 


function initialize() { 

    // map options 
    var mapOptions = { 
    zoom: 13, 
    center: new google.maps.LatLng(-6.176037, 106.827142), 
    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 = [[[........]]]; 

    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: '#FF8533', 
    fillOpacity: 0.35 
    }); 


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

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

    var coorArray2 = [[[..........]]]; 

    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 < coorArray2[0].length; i++) { 
    element1 = coorArray2[0][i][1]; 
    element2 = coorArray2[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: '#FF4D4D', 
    fillOpacity: 0.35 
    }); 
} 

    // ************** POLYGON 3************************************************** 

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

    var coorArray3 = [[[................]]]; 

    addNewPoly(coorArray3); 

    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(coorArray3) { 

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

    window.alert("inside addNewPoly") 

    for (i = 0; i < coorArray3[0].length; i++) { 
    element1 = coorArray3[0][i][1]; 
    element2 = coorArray3[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: '#FFFF4D', 
    fillOpacity: 0.35 
    }); 
    } 


    // ************** POLYGON 4 ************************************************** 

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

    var coorArray4 = [[[......................]]]; 

    addNewPoly(coorArray4); 

    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(coorArray4) { 

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

    window.alert("inside addNewPoly") 

    for (i = 0; i < coorArray4[0].length; i++) { 
    element1 = coorArray4[0][i][1]; 
    element2 = coorArray4[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: '#A375FF', 
    fillOpacity: 0.35 
    }); 
    } 

    // ************** POLYGON 5************************************************** 

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

    var coorArray5= [[[.................]]]; 

    addNewPoly(coorArray5); 

    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(coorArray5) { 

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

    window.alert("inside addNewPoly") 

    for (i = 0; i < coorArray5[0].length; i++) { 
    element1 = coorArray5[0][i][1]; 
    element2 = coorArray5[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: '#4DFF4D', 
    fillOpacity: 0.35 
    }); 

    return bermudaTriangle; 

    } 

Answer 1

你必須具有相同名稱（addNewPoly）多種功能。特定的瀏覽器會選擇一個。

而且#GG5555不是有效的顏色。

一種可能的解決方案，創建一個功能，通過所需的顏色在作爲附加參數。

function addNewPoly(coorArray, strokeColor, fillColor) { 

    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: strokeColor, 
    strokeOpacity: 0.8, 
    strokeWeight: 3, 
    fillColor: fillColor, 
    fillOpacity: 0.35 
    }); 

    return bermudaTriangle; 

    } 

或者你可以爲每個座標數組創建一個不同的函數（addNewPoly5()）。