Question

我想要使用googlemaps API v3绘制多边形的地图。如果我自己绘制一个多边形，我可以在没有问题的多边形的getPath（）上获取onChange事件;但如果我想让用户绘制多边形，我就无法从多边形中获取onChange事件。

我的想法是创建两个空的多边形并使用一个用于drawingManager;一旦drawingManager的多边形触发polygonComplete，我将其路径复制到另一个多边形并摆脱drawingManager，但这不起作用。

HTML：

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=drawing" type="text/javascript"></script>

的CSS：

#map{
  height: 500px;
  width: 500px;
}

JS：

if (document.getElementById('map')){  

  var mapOptions = {
    zoom: 6,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var field = new google.maps.Polygon({
    paths: [],
    editable: true
  });

  var map = new google.maps.Map(document.getElementById('map'), mapOptions);

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    polygonOptions: {
      editable: false
    },
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [google.maps.drawing.OverlayType.POLYGON]
    }
  });
  drawingManager.setMap(map);

  google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
    drawingManager.setOptions({
      drawingMode: null,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: []
      }
    });
    field.setPath(polygon.getPath().getArray());
    polygon.setMap(null);
    polygon = null;
    field.setMap(map);
  });

  google.maps.event.addListener(field.getPath(), 'set_at', function(index, obj) {
    // changed point, via map
    console.log(field.getPath());
    console.log("a point has changed");
  });
  google.maps.event.addListener(field.getPath(), 'insert_at', function(index, obj) {
    // new point via map
    console.log(field.getPath());
    console.log("a point has been added");
  });
  google.maps.event.addListener(field.getPath(), "remove_at", function(index, obj) {
    //removed point, via map
    console.log(field.getPath());
    console.log("a point has been removed");
  });
}

我还设置了一个codepen示例here。

Answer 1

您需要移动在polygoncomplete事件处理函数中添加事件侦听器的代码。

相关问题：Javascript google maps drawing events。

google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
  drawingManager.setOptions({
    drawingMode: null,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: []
    }
  });
  field.setPath(polygon.getPath().getArray());
  polygon.setMap(null);
  polygon = null;
  field.setMap(map);
  google.maps.event.addListener(field.getPath(), 'set_at', function(index, obj) {
    // changed point, via map
    console.log(field.getPath());
    console.log("a point has changed");
  });
  google.maps.event.addListener(field.getPath(), 'insert_at', function(index, obj) {
    // new point via map
    console.log(field.getPath());
    console.log("a point has been added");
  });
  google.maps.event.addListener(field.getPath(), "remove_at", function(index, obj) {
    //removed point, via map
    console.log(field.getPath());
    console.log("a point has been removed");
  });
});

proof of concept fiddle

代码段

＆＃13;

var map;

function initialize() {
  if (document.getElementById('map')) {

    var mapOptions = {
      zoom: 6,
      center: {
        lat: 24.886,
        lng: -70.268
      },
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var field = new google.maps.Polygon({
      paths: [],
      editable: true
    });

    map = new google.maps.Map(document.getElementById('map'), mapOptions);

    var drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.POLYGON,
      polygonOptions: {
        editable: false
      },
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [google.maps.drawing.OverlayType.POLYGON]
      }
    });
    drawingManager.setMap(map);

    google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
      drawingManager.setOptions({
        drawingMode: null,
        drawingControlOptions: {
          position: google.maps.ControlPosition.TOP_CENTER,
          drawingModes: []
        }
      });
      field.setPath(polygon.getPath().getArray());
      polygon.setMap(null);
      polygon = null;
      field.setMap(map);
      google.maps.event.addListener(field.getPath(), 'set_at', function(index, obj) {
        // changed point, via map
        for (var i = 0; i < field.getPath().getLength(); i++) {
          console.log(field.getPath().getAt(i).toUrlValue(6));
        }
        console.log("a point has changed");
      });
      google.maps.event.addListener(field.getPath(), 'insert_at', function(index, obj) {
        // new point via map
        for (var i = 0; i < field.getPath().getLength(); i++) {
          console.log(field.getPath().getAt(i).toUrlValue(6));
        }
        console.log("a point has been added");
      });
      google.maps.event.addListener(field.getPath(), "remove_at", function(index, obj) {
        //removed point, via map
        for (var i = 0; i < field.getPath().getLength(); i++) {
          console.log(field.getPath().getAt(i).toUrlValue(6));
        }
        console.log("a point has been removed");
      });
    });
  }
}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

#map {
  height: 500px;
  width: 500px;
}

＆＃13;

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

＆＃13;

maps API v3在polygoncomplete之后无法获取更改事件

1 个答案: