javascript - marcadores - Controlador de eventos para editar una Polilínea de Google Maps?
google.maps.marker example (1)
Estoy buscando un evento que se active mientras está editando una Polilínea en Google Maps, similar al evento ''arrastrar'' en Marcadores. Encontré el evento ''captureuring_changed'', pero parece activarse en dragstart y dragend, no en drag. Como tengo que reinventar la rueda al permitir que se arrastre un marcador y actualizando la polilínea en función de dónde está el marcador, básicamente reinventar las polilíneas editables. Me gustaría poder agregar marcadores, que las polilíneas editables funcionan sin problemas, pero tengo que ser capaz de detectar al arrastrar. No puedo encontrar nada en la documentación de la API o en una búsqueda en Google, así que pensé en preguntar aquí.
EDITAR: Parece que la respuesta es no, esta funcionalidad no existe.
El ejemplo simple de Polyline de la documentación modificada para agregar eventos a los cambios (insert_at, remove_at, set_at, dragend).
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Polyline Simple</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var flightPath = null;
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var mapOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById(''map-canvas''), mapOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: ''#FF0000'',
strokeOpacity: 1.0,
strokeWeight: 2,
editable: true,
draggable: true
});
google.maps.event.addListener(flightPath, "dragend", getPath);
google.maps.event.addListener(flightPath.getPath(), "insert_at", getPath);
google.maps.event.addListener(flightPath.getPath(), "remove_at", getPath);
google.maps.event.addListener(flightPath.getPath(), "set_at", getPath);
flightPath.setMap(map);
}
function getPath() {
var path = flightPath.getPath();
var len = path.getLength();
var coordStr = "";
for (var i=0; i<len; i++) {
coordStr += path.getAt(i).toUrlValue(6)+"<br>";
}
document.getElementById(''path'').innerHTML = coordStr;
}
</script>
</head>
<body onload="initialize()">
<div id="map-canvas" style="height:500px; width:600px;"></div>
<div id="path"></div>
</body>
</html>
fragmento de código:
var flightPath = null;
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var mapOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById(''map-canvas''), mapOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: ''#FF0000'',
strokeOpacity: 1.0,
strokeWeight: 2,
editable: true,
draggable: true
});
google.maps.event.addListener(flightPath, "dragend", getPath);
google.maps.event.addListener(flightPath.getPath(), "insert_at", getPath);
google.maps.event.addListener(flightPath.getPath(), "remove_at", getPath);
google.maps.event.addListener(flightPath.getPath(), "set_at", getPath);
flightPath.setMap(map);
}
function getPath() {
var path = flightPath.getPath();
var len = path.getLength();
var coordStr = "";
for (var i = 0; i < len; i++) {
coordStr += path.getAt(i).toUrlValue(6) + "<br>";
}
document.getElementById(''path'').innerHTML = coordStr;
}
google.maps.event.addDomListener(window, ''load'', initialize);
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="path"></div>
<div id="map-canvas" style="height:500px; width:600px;"></div>