15

Sto cercando un evento che si attiva mentre stai modificando una polilinea in Google Maps, simile all'evento 'trascina' su Marcatori. Ho trovato l'evento 'capturing_changed', ma sembra sparare su dragstart e dragend, non sulla resistenza. Così come sto reinventando la ruota, consentendo il trascinamento di un marcatore e l'aggiornamento della polilinea in base a dove si trova il marcatore, in pratica reinventando le polilinee modificabili. Mi piacerebbe essere in grado di aggiungere marcatori, che le polilinee modificabili fanno senza problemi, ma devo essere in grado di rilevare durante il trascinamento. Non riesco a trovare nulla nella documentazione dell'API o su una ricerca su Google, quindi ho pensato di chiedere qui.Gestore di eventi per la modifica di una polilinea di Google Maps?

MODIFICA: Sembra che la risposta sia no, questa funzionalità non esiste.

+0

Siete alla ricerca di un evento che gli incendi su trascinando i lavori (dragend) Polyline? O quando [inserisci o modifica punti] (https://developers.google.com/maps/documentation/javascript/overlays#user_editable_shapes_events)? – geocodezip

+0

Durante la modifica di una polilinea modificabile. Quindi, l'equivalente di "trascina" per i marcatori, ma non trascinando l'intera polilinea, trascinando un punto sulla polilinea in modalità modificabile. –

risposta

20

simple Polyline example from the documentation modificato per aggiungere eventi alle modifiche (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> 

working example

frammento di codice:

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>

+2

Come ho chiarito nel commento sopra, questo non è quello che sto cercando. Voglio un evento che si attiva mentre viene trascinato un punto modificabile. Immagina che ogni punto di modifica sulla Polilinea modificabile fosse un indicatore, voglio l'equivalente di "trascina" per quel marcatore. –

+0

Perché ne hai bisogno? (Non penso che esista, puoi provare a fare una [richiesta di miglioramento] (http://code.google.com/p/gmaps-api-issues/)) – geocodezip

+0

Non sono sicuro di averne bisogno più, perché mi sto avvicinando al problema da una direzione diversa. In pratica sto facendo percorsi di viaggio modificabili con marcatori su determinati waypoint e una forma corrispondente con aggiornamenti che vanno in entrambe le direzioni in tempo reale. Ho una soluzione funzionante, non è così pulita come potrebbe essere. –

Problemi correlati