Google Maps API, wie der Klick-Listener zu erkennen, zieht

Question

Ich versuche, ein editierbares Polygon in Google Maps zu erstellen, die bei Änderung die Geo-Koordinaten des Polygons zurückgibt. Bei der folgenden JS-Fiddle werden Sie bemerken, dass wenn Sie ein Dreieck erstellen und dann einen der Punkte ziehen, der Ereignis-Listener den Klick nicht aufnimmt; Aber natürlich, wenn Sie den Punkt erneut anklicken, wird er es erkennen.

Gibt es eine Möglichkeit, Google Maps einen Ereignis-Listener für "Ziehen" -Ereignisse des Polygons hinzuzufügen?

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

Wenn Sie in den Eckpunkten des Polygons erfassen Änderungen wollen, müssen Sie Ereignis-Listener auf dem Weg des Polygons setzen. Für einfache Polygone (mit nur einem Pfad, keine Löcher, die Einzigen, die leicht mit dem Zeichenmanager erstellen), werden diese Arbeit:

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

Verwandte Frage: Event handler for editing a Google Maps Polyline?

Code-Schnipsel:

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

Es ist ein drag Ereignis auf Polygon. Es sollte unter Verwendung google.maps.event.addListener nicht google.maps.event.addDomListener angebracht werden. Weitere Informationen zu Polygonereignissen finden Sie unter here in the docs (weiter unten unter Events).

Dies funktioniert:

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