Google地图：应用事件监听器

Question

我需要在使用Google地图绘图模式时跟踪绘制形状的坐标。绘制一个形状后我可以添加事件监听器（例如多边形）来记录click和dragend事件中的给定ID和坐标，但是在编辑形状时它们不起作用（例如{{ 1}}，insert_at，remove_at）。

set_at

设置多边形选项工作正常;如果单击多边形，则会在控制台中记录正确的shapeID。

我的问题是我想添加这样的事件：

var shapeID = 1;

google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
  drawingManager.setDrawingMode(null);

  polygon.setOptions({ id: shapeID, editable:true, draggable:true });

  google.maps.event.addListener(polygon, 'click', function() {
    console.log(this.id+' '+this.getPath().getArray().toString());
  });

  google.maps.event.addListener(polygon, 'dragend', function() {
    console.log(this.id+' '+this.getPath().getArray().toString());
  });

  google.maps.event.addListener(polygon, 'insert_at', function() {
    console.log(this.id+' '+this.getPath().getArray().toString());
  });

  google.maps.event.addListener(polygon, 'remove_at', function() {
    console.log(this.id+' '+this.getPath().getArray().toString());
  });

  google.maps.event.addListener(polygon, 'set_at', function() {
    console.log(this.id+' '+this.getPath().getArray().toString());
  });

  shapeID++;
});

但我无法通过指定的shapeID访问形状。谷歌地图不允许我在字符串中分配多边形ID：

google.maps.event.addListener(polygon.getPath(), "insert_at", getPath);
google.maps.event.addListener(polygon.getPath(), "remove_at", getPath);
google.maps.event.addListener(polygon.getPath(), "set_at", getPath);

function getPath() {
  var path = polygon.getPath();
  var len = path.getLength();
  var coordStr = 'id: '+polygon.id+'\n';
  for (var i=0; i<len; i++) {
    coordStr += path.getAt(i).toUrlValue(6)+"\n";
  }
  console.log(coordStr);
}

我收到一条错误，上面写着“a未定义”。

Answer 1

如果在getPath事件函数的内部（本地）包含overlaycomplete函数，它可以引用多边形及其ID。

var shapeID = 1;

google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
  drawingManager.setDrawingMode(null);

  polygon.setOptions({
    id: shapeID,
    editable: true,
    draggable: true
  });

  google.maps.event.addListener(polygon, 'click', function() {
    console.log(this.id + ' ' + this.getPath().getArray().toString());
  });

  google.maps.event.addListener(polygon, 'dragend', function() {
    console.log(this.id + ' ' + this.getPath().getArray().toString());
  });

  google.maps.event.addListener(polygon.getPath(), "insert_at", getPath);
  google.maps.event.addListener(polygon.getPath(), "remove_at", getPath);
  google.maps.event.addListener(polygon.getPath(), "set_at", getPath);

  function getPath() {
    var path = polygon.getPath();
    var len = path.getLength();
    var coordStr = 'id: ' + polygon.id + '\n';
    for (var i = 0; i < len; i++) {
      coordStr += this.getAt(i).toUrlValue(6) + "\n";
    }
    console.log(coordStr);
  }

  shapeID++;
});

proof of concept fiddle

代码段

＆＃13;

＆＃13;

var geocoder;
var map;

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

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
    },
    markerOptions: {
      icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);

  var shapeID = 1;

  google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
    drawingManager.setDrawingMode(null);

    polygon.setOptions({
      id: shapeID,
      editable: true,
      draggable: true
    });

    google.maps.event.addListener(polygon, 'click', function() {
      console.log(this.id + ' ' + this.getPath().getArray().toString());
    });

    google.maps.event.addListener(polygon, 'dragend', function() {
      console.log(this.id + ' ' + this.getPath().getArray().toString());
    });

    google.maps.event.addListener(polygon.getPath(), "insert_at", getPath);
    google.maps.event.addListener(polygon.getPath(), "remove_at", getPath);
    google.maps.event.addListener(polygon.getPath(), "set_at", getPath);

    function getPath() {
      var path = polygon.getPath();
      var len = path.getLength();
      var coordStr = 'id: ' + polygon.id + '\n';
      for (var i = 0; i < len; i++) {
        coordStr += this.getAt(i).toUrlValue(6) + "\n";
      }
      console.log(coordStr);
    }

    shapeID++;
  });
}


google.maps.event.addDomListener(window, "load", initMap);

＆＃13;

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */

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

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing"></script>
<div id="map"></div>

＆＃13;

＆＃13;

＆＃13;