动态Google Maps Polygon - 如何在单击时设置为可编辑

Question

我已经在谷歌地图上成功创建了动态多边形，给出了一组latlng。

  <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”函数来保持多边形/侦听器的闭包：

jsonmap: function (item) {
    return item.cell[columnOrder.uid];
}

1. 在循环中使用它：

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

proof of concept fiddle

代码段

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

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
}