将事件侦听器应用于可编辑多边形

Question

当用户更改边界时，如何向谷歌地图可编辑多边形添加事件侦听器？

我尝试了下面的代码。 Here is a Fiddle example

google.maps.event.addListener(PolygonPath, 'drag', function(e) {

        window.alert("Hi");

}); 

这就是我想要的：

代码 sn-p（来自链接的小提琴）：

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

<div id="map"></div>

<script>
  var PolygonPath;

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: {
        lat: 0,
        lng: 0
      }
    });

    PolygonPath = new google.maps.Polygon({
      strokeColor: '#FF8C00',
      strokeOpacity: 1.0,
      strokeWeight: 3,
      editable: true,
      //geodesic: true,
      map: map
    });


    console.log(PolygonPath);


    google.maps.event.addListener(map, 'click', function(e) {
      addLatLng(e);
    });

    google.maps.event.addListener(PolygonPath, 'drag', function(e) {

      window.alert("Hi");

    });

  }


  function addLatLng(event) {
    pathLine = PolygonPath.getPath();
    pathLine.push(event.latLng);
    //ValueUnit = google.maps.geometry.spherical.computeArea(pathLine);

  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap" async defer></script>

Answer 1

您需要将事件侦听器添加到 Polygon 的路径：

google.maps.event.addListener(PolygonPath.getPath(), 'insert_at', function(evt) {
  document.getElementById('info').innerHTML = PolygonPath.getPath().getAt(evt).toUrlValue(6);
});

MVCArray 上有三个有趣的事件（因为它们适用于多边形路径）：

• insert_at - 添加一个顶点
• remove_at - 删除一个顶点
• set_at - 改变一个顶点

在 Polygon 路径上实现 insert_at 和 set_at 侦听器的代码 sn-p：

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

<div id="info"></div>
<div id="map"></div>

<script>
  var PolygonPath;

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: {
        lat: 0,
        lng: 0
      }
    });

    PolygonPath = new google.maps.Polygon({
      strokeColor: '#FF8C00',
      strokeOpacity: 1.0,
      strokeWeight: 3,
      editable: true,
      //geodesic: true,
      map: map
    });


    console.log(PolygonPath);

    google.maps.event.addListener(PolygonPath.getPath(), 'insert_at', function(evt) {
      document.getElementById('info').innerHTML = "insert:" + PolygonPath.getPath().getAt(evt).toUrlValue(6);
    })
    google.maps.event.addListener(PolygonPath.getPath(), 'set_at', function(evt) {
      document.getElementById('info').innerHTML = "set:" + PolygonPath.getPath().getAt(evt).toUrlValue(6);
    })
    google.maps.event.addListener(map, 'click', function(e) {
      addLatLng(e);
    });

    google.maps.event.addListener(PolygonPath, 'drag', function(e) {

      window.alert("Hi");

    });

  }


  function addLatLng(event) {
    pathLine = PolygonPath.getPath();
    pathLine.push(event.latLng);
    //ValueUnit = google.maps.geometry.spherical.computeArea(pathLine);

  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap" async defer></script>