如何在多个多边形中填充不同的颜色 Google Maps 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())。

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

How to fill different colours in multiple polygons Google Maps V3?

javascript

google-maps

google-maps-api-3

polygons