javascript - Google Maps API 如何让点击监听器识别拖动

Question

我正在尝试在谷歌地图中创建一个可编辑的多边形，在更改时返回多边形的地理坐标。在下面的 JS Fiddle 中，您会注意到，如果您创建一个三 Angular 形，然后拖动其中一个点，事件监听器不会接收到单击；但当然，如果您再次单击该点，它会识别它。

有没有办法向谷歌地图添加事件监听器以处理多边形的“拖动”事件？

http://jsfiddle.net/mclean25/pnc4ttb0/5/

HTML

<div id="map_canvas" style="width:500px; height:450px;"></div>
<textarea height="100" wid name="vertices" value="" id="vertices"  ></textarea>

Javascript

var map; // Global declaration of the map
var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow
var lat_longs = new Array();
var markers = new Array();
var drawingManager;
function initialize() {
     var myLatlng = new google.maps.LatLng(40.9403762, -74.1318096);
    var myOptions = {
        zoom: 13,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP}
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: true,
    drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [google.maps.drawing.OverlayType.POLYGON]
    },
            polygonOptions: {
                editable: true
            }

    });
    drawingManager.setMap(map);

    google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
        var newShape = event.overlay;
        newShape.type = event.type;
    });

    google.maps.event.addListener(drawingManager, "overlaycomplete", function(event){
        overlayClickListener(event.overlay);
        var values = event.overlay.getPath().getArray();
        for (var i = 0; i < values.length; i++){
            //console.log("lat:", values[i].lat());
            //console.log("lng:", values[i].lng());
        }
        $('#vertices').val(event.overlay.getPath().getArray());
    });
}

function overlayClickListener(overlay) {
  google.maps.event.addDomListener(overlay, "click", function(event){
        console.log("Changing this guy!");
    $('#vertices').val(overlay.getPath().getArray());
  });

}
initialize();

$(function(){
    $('#save').click(function(){

        //iterate polygon vertices?
    });
});

Answer 1

如果要捕获多边形顶点的变化，需要在多边形的路径上设置事件监听器。对于简单的多边形(只有一条路径，没有孔，唯一可以使用绘图管理器轻松创建的多边形)，这将起作用:

var overlay;
google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
  $('#vertices').val(event.overlay.getPath().getArray());
  overlay = event.overlay;  // save a reference to the polygon
  // new vertex listener
  google.maps.event.addListener(event.overlay.getPath(), 'insert_at', getCoordinates); 
  // move vertex listener
  google.maps.event.addListener(event.overlay.getPath(), 'set_at', getCoordinates); 
});
function getCoordinates(index, element) {
  $('#vertices').val(overlay.getPath().getArray());
}

相关问题:Event handler for editing a Google Maps Polyline?

代码片段:

var map; // Global declaration of the map
var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow
var lat_longs = new Array();
var markers = new Array();
var drawingManager;
var overlay;


function initialize() {
  var myLatlng = new google.maps.LatLng(40.9403762, -74.1318096);
  var myOptions = {
    zoom: 13,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [google.maps.drawing.OverlayType.POLYGON]
    },
    polygonOptions: {
      editable: true
    }
  });
  drawingManager.setMap(map);

  google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
    var newShape = event.overlay;
    newShape.type = event.type;
  });

  google.maps.event.addListener(drawingManager, "overlaycomplete", function(event) {
    google.maps.event.addListener(event.overlay, 'click', function(evt) {
      overlay = this;
      getCoordinates();
    })

    $('#vertices').val(event.overlay.getPath().getArray());
    overlay = event.overlay;
    google.maps.event.addListener(event.overlay.getPath(), 'insert_at', getCoordinates);
    google.maps.event.addListener(event.overlay.getPath(), 'remove_at', getCoordinates);
    google.maps.event.addListener(event.overlay.getPath(), 'set_at', getCoordinates);
  });
}

function getCoordinates(index, element) {
  $('#vertices').val(overlay.getPath().getArray());
}

function overlayClickListener(overlay) {
  google.maps.event.addListener(overlay, "click", function(event) {
    console.log("Changing this guy!");
    overlay = this;
    $('#vertices').val(overlay.getPath().getArray());
  });
}
initialize();

$(function() {
  $('#save').click(function() {

    //iterate polygon vertices?
  });
});

#vertices {
  height: 100px;
  width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?libraries=drawing"></script>
<div id="map_canvas" style="width:500px; height:450px;"></div>
<textarea name="vertices" value="" id="vertices"></textarea>