如何使用Google-Maps-API-3绘制多个多边形

How to draw multiple polygons with Google-Maps-Api-3?

本文关键字:多边形 绘制 何使用 Google-Maps-API-3      更新时间:2023-09-26

我正在尝试将多个多边形迭代绘制到谷歌地图中。这是我到目前为止所拥有的:

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教程中提取了这个例子并解决了它。

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));
}