API Карт Google, как получить прослушиватель кликов для распознавания перетаскивания

Question

Я пытаюсь создать редактируемый многоугольник на картах Google, которые при изменении возвращают геокоординаты геолога. На следующем JS Fiddle вы заметите, что если вы создаете треугольник, а затем перетащите одну из точек, слушатель событий не заберет клик; но, конечно, если вы снова нажмете точку, она ее узнает.

Есть ли способ добавить прослушиватель событий к картам Google для событий «перетаскивания» многоугольника?

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