Javascript 如何在多个多边形中填充不同的颜色Google Maps V3？

我试着用多个多边形绘制地图，但在组合颜色时遇到了问题

我做了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;  

  }

var映射；
var信息窗口；
var bermudaTriangle=新数组（）；
//角度控制器等
函数初始化（）{
//地图选项
变量映射选项={
缩放：13，
中心：新google.maps.LatLng（-6.176037106.827142），
mapTypeId:google.maps.mapTypeId.TERRAIN，
};
//初始化
//百慕大角变异；
var bounds=new google.maps.LatLngBounds（）；
//定义地图
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
//***************多边形1**************************************************
//定义多边形的板条坐标。
var coorArray=[[……]]；
var triangelecoords=新数组（）；
变量元素1；
var element2；
对于（i=0；i对于（var i=0，l=bermudaTriangle.length；i您有多个同名函数（
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;  

  }

函数addNewPoly（coorArray、strokeColor、fillColor）{
var triangelecoords=新数组（）；
变量元素1；
var element2；
window.alert（“内部addNewPoly”）
对于（i=0；i

或者，您可以为每个坐标数组创建不同的函数（
addNewPoly5（）
）。
您可能希望将代码缩短为只包含相关部分。这确实有点长。以及已删除的部分（多边形坐标）是重现问题所必需的。请提供一份展示问题的报告。这是你的意思？？？@PaulWilliams yaa我知道。对不起，我只是研究了一下，没有尝试使用数据库yet@geocodezip因为坐标太长了，但是谢谢你的建议，让我尝试一下代码中的不同功能…strokeColor和fillColor sti我会用十六进制颜色，对吗？