javascript - 动态 Google map 多边形 - 单击时如何设置为可编辑

Question

我已在给定经纬度集的情况下在谷歌地图上成功创建了动态多边形。

  <script>
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 25.774252, lng: -80.190262},
    zoom: 2
  });

  var latlngs = [
    [
      {lat:25.774252,lng:-80.190262},
      {lat:18.466465,lng:-66.118292},
      {lat:32.321384,lng:-64.757370},
      {lat:25.774252,lng:-80.190262},
    ],
    [
      {lat:59.677361,lng:-2.469846},
      {lat:59.299717,lng:-6.314917},
      {lat:57.877247,lng:-9.314917},
      {lat:54.428078,lng:-11.638861},
      {lat:51.784554,lng:-11.702241}
    ]
  ];
  for(var y=0; y<latlngs.length; y++) {

    var sample=[];

    for(var z=0; z<latlngs[y].length; z++) {
      sample.push(new google.maps.LatLng(parseFloat(latlngs[y][z].lat), parseFloat(latlngs[y][z].lng)));
    }

    var boundary = new google.maps.Polygon({
      paths: sample,
      strokeColor: 'black',
      strokeWeight: 2,
      fillColor: 'black',
      fillOpacity: 0.2,
      zIndex: 1,
      content: 'AREA '+y
    });
    boundary.setMap(map);

    var infoWindow = new google.maps.InfoWindow;
    boundary.addListener('click', function(event){
      boundary.setEditable(true); // <- HERE IS THE PROBLEM
      infoWindow.setContent(this.content);
      infoWindow.setPosition(event.latLng);
      infoWindow.open(map);
    });
  }
</script>

上述代码的问题是，即使我点击了第一个多边形，也只有最后一个多边形会设置为可编辑。

代码应该是什么，只有被点击的多边形才会设置为可编辑？

Answer 1

常见问题通常出现在 InfoWindows 与在循环中创建的标记的关联中(相关问题表明:Google Maps JS API v3 - Simple Multiple Marker Example)。最后创建的元素以监听器结束。解决它的一种方法是使用函数闭包将监听器与每个单独的多边形相关联:

1. 创建一个“createEditablePolygon”函数来关闭多边形/监听器:

function createEditablePolygon(latlngs, index) {
  var sample = [];
  for (var z = 0; z < latlngs.length; z++) {
    sample.push(new google.maps.LatLng(parseFloat(latlngs[z].lat), parseFloat(latlngs[z].lng)));
  }

  var boundary = new google.maps.Polygon({
    paths: sample,
    strokeColor: 'black',
    strokeWeight: 2,
    fillColor: 'black',
    fillOpacity: 0.2,
    zIndex: 1,
    content: 'AREA ' + index
  });
  boundary.setMap(map);

  var infoWindow = new google.maps.InfoWindow;
  boundary.addListener('click', function(event) {
    // toggle editable state
    boundary.setEditable(!boundary.getEditable());
    infoWindow.setContent(this.content);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
  });
}

1. 在循环中使用它:

for (var y = 0; y < latlngs.length; y++) {
  createEditablePolygon(latlngs[y], y);
}

proof of concept fiddle

代码片段:

var map;

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 25.774252,
      lng: -80.190262
    },
    zoom: 2
  });

  for (var y = 0; y < latlngs.length; y++) {
    createEditablePolygon(latlngs[y], y);
  }
}

function createEditablePolygon(latlngs, index) {
  var sample = [];
  for (var z = 0; z < latlngs.length; z++) {
    sample.push(new google.maps.LatLng(parseFloat(latlngs[z].lat), parseFloat(latlngs[z].lng)));
  }

  var boundary = new google.maps.Polygon({
    paths: sample,
    strokeColor: 'black',
    strokeWeight: 2,
    fillColor: 'black',
    fillOpacity: 0.2,
    zIndex: 1,
    content: 'AREA ' + index
  });
  boundary.setMap(map);

  var infoWindow = new google.maps.InfoWindow;
  boundary.addListener('click', function(event) {
    // toggle editable state
    boundary.setEditable(!boundary.getEditable());
    infoWindow.setContent(this.content);
    infoWindow.setPosition(event.latLng);
    infoWindow.open(map);
  });
}
google.maps.event.addDomListener(window, "load", initialize);
var latlngs = [
  [{
    lat: 25.774252,
    lng: -80.190262
  }, {
    lat: 18.466465,
    lng: -66.118292
  }, {
    lat: 32.321384,
    lng: -64.757370
  }, {
    lat: 25.774252,
    lng: -80.190262
  }, ],
  [{
    lat: 59.677361,
    lng: -2.469846
  }, {
    lat: 59.299717,
    lng: -6.314917
  }, {
    lat: 57.877247,
    lng: -9.314917
  }, {
    lat: 54.428078,
    lng: -11.638861
  }, {
    lat: 51.784554,
    lng: -11.702241
  }]
];

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>