谷歌地圖API如何讓點擊偵聽器識別拖動

Question

我試圖在谷歌地圖上創建一個可編輯的多邊形，在更改時返回多邊形的地理座標。在下面的JS Fiddle中，你會注意到如果你創建了一個三角形，然後拖動其中的一個點，那麼事件監聽器就不會選擇點擊;但是，當然，如果再次點擊該點，它會識別它。

有沒有什麼辦法可以將事件監聽器添加到谷歌地圖中以便「拖動」多邊形事件？

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>

Answer 2

有一個drag事件上的多邊形。它應該使用google.maps.event.addListener而不是google.maps.event.addDomListener來附加。有關多邊形事件的更多信息here in the docs（向下滾動至Events）。

這工作：

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