15

Szukam zdarzenia, które zostanie wywołane podczas edytowania polilinii w Mapach Google, podobnie do zdarzenia "przeciągnij" na znacznikach. Znalazłem zdarzenie "capture_changed", ale wydaje się, że uruchamia się przy dragstart i dragend, a nie przy drag. Tak jak muszę wymyślić koło, pozwalając na przeciągnięcie Markera i aktualizowanie Polilinii na podstawie tego, gdzie Marker jest, na nowo odkrywając edytowalne polilinie. Chciałbym móc dodać Markery, które można edytować płynnie, ale muszę być w stanie wykryć po przeciągnięciu. Nie mogę znaleźć niczego w dokumentacji API ani w wyszukiwarce Google, więc pomyślałem, że zapytam tutaj.Program obsługi zdarzeń do edycji polilinii Map Google?

EDYCJA: Wygląda na to, że odpowiedź brzmi nie, ta funkcja nie istnieje.

+0

Szukasz zdarzenie, które pożary na przeciąganie polilinii (prac dragend)? Lub kiedy [wstawiasz lub zmieniasz punkty] (https://developers.google.com/maps/documentation/javascript/overlays#user_editable_shapes_events)? – geocodezip

+0

Podczas edytowania edytowalnej polilinii. Tak więc odpowiednik "przeciągania" dla znaczników, ale nie przeciągania całej polilinii po przeciągnięciu jednego punktu na polilinii w trybie edytowalnym. –

Odpowiedz

20

Zmodyfikowano simple Polyline example from the documentation, aby dodać zdarzenia po zmianach (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

fragment kodu:

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

Jak wyjaśniłem w powyższym komentarzu, nie jest to tym, czego szukam. Chcę, aby zdarzenie było uruchamiane podczas przeciągania edytowalnego punktu. Wyobraź sobie, że każdy punkt edycji edytowalnej Polilinii był znacznikiem, chcę mieć odpowiednik "przeciągania" dla tego znacznika. –

+0

Dlaczego tego potrzebujesz? (Nie sądzę, że istnieje, możesz spróbować zrobić [prośbę o ulepszenie] (http://code.google.com/p/gmaps-api-issues/)) – geocodezip

+0

Nie jestem pewien, czy tego potrzebuję już, ponieważ zbliżam się do problemu z innej strony. Zasadniczo wykonuję edytowalne trasy podróży ze znacznikami na niektórych punktach trasy i odpowiadającą im formę z aktualizacjami, które obie strony poruszają się w czasie rzeczywistym. Mam działające rozwiązanie, po prostu nie jest tak czyste, jak mogłoby być. –

Powiązane problemy