google-maps-api-3 - 谷歌地图 : Applying Event Listeners

Question

我需要在使用 Google map 绘图模式时跟踪绘制形状的坐标。我可以在绘制形状(例如多边形)后添加事件监听器，以在 click 和 dragend 事件中记录给定的 ID 和坐标，但它们在编辑时不起作用形状(例如 insert_at、remove_at、set_at)。

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 将记录在控制台中。

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

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

但我无法通过指定的 shapeID 访问这些形状。 Google map 不允许我在字符串中分配多边形 ID:

google.maps.event.addListener(POLYGON_ID.getPath(), "insert_at", getPath);

我收到一条错误消息“a is not defined”。

Answer 1

如果您在 overlaycomplete 事件函数内部(本地)包含 getPath 函数，它可以引用多边形及其 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

代码片段:

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

/* 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;
}

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