Google Maps: Live Zeichnen und Aktualisieren einer Polylinie

Question

Ich bin wirklich Neuling in JS, so tut mir leid, dass ich keinen Code angehängt habe, denn alles was ich getan habe - "Helloworld" Beispiele von Google Map Docs.

Also, was ist ein Problem: Ich möchte eine Polylinie abhängig von der aktuellen Position des Benutzers zeichnen. Also, jeder google.maps.LatLng() sollte Koordinaten im Moment haben. Auf der Karte sollte der ganze Weg auftauchen, zum Beispiel einmal alle 5 Sekunden. Letztendlich ist es wie die Visualisierung eines Morgens, der auf einer Karte läuft, so etwas.

Ich weiß, wie man eine Karte zu „zeichnen“ und Punkte in var flightPlanCoordinates hinzufügen [], und ich bitte für einige Beispiele oder Links, wo ich finden kann:

• Wie eine aktuelle hinzufügen Position in var flightPlanCoordinates []
• Wie all dieses Zeug Aktualisierung im "live" Modus

machen

Vielen Dank für jede Hilfe :)

UPD:

versuchen, Sachen wie diese zu tun, aber nicht funktioniert

var path = poly.getPath(); 

var latitude = position.coords.latitude; 
var longitude = position.coords.longitude; 

path.push(new google.maps.LatLng(latitude, longitude)); 

UPD2: hier kühles Beispiel ist, wie es sein sollte http://kasheftin.github.io/gmaps/

Answer 1

Sie müssen die Polylinie mit dem neuen Pfad aktualisieren (der Pfad, der mit dem neuen Punkt aktualisiert wurde):

// get existing path 
var path = poly.getPath(); 
// add new point 
path.push(new google.maps.LatLng(position.coords.latitude, position.coords.longitude)); 
// update the polyline with the updated path 
poly.setPath(path); 

Code-Schnipsel: (auf der Karte klicken Sie verweist auf die Polylinie hinzufügen)

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var poly = new google.maps.Polyline({ 
 
    map: map, 
 
    path: [] 
 
    }) 
 
    google.maps.event.addListener(map, 'click', function(evt) { 
 
    // get existing path 
 
    var path = poly.getPath(); 
 
    // add new point (use the position from the click event) 
 
    path.push(new google.maps.LatLng(evt.latLng.lat(), evt.latLng.lng())); 
 
    // update the polyline with the updated path 
 
    poly.setPath(path); 
 
    }) 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>

Answer 2

den Code Versuchen Sie unter:

var path = poly.getPath().getArray(); 
path.push(new google.maps.LatLng(position.coords.latitude, position.coords.longitude)); 
poly.setPath(path); 

Answer 3

Ab sofort Mit der API können Sie nur das neue Objekt LatLng auf dieschieben, damit es auf der Karte aktualisiert wird.

Als ihr Complex Polyline Beispiel zeigt, können Sie tun:

var path = poly.getPath() 
path.push(latLng) 

Wo poly Ihre google.maps.Polyline und latLng ein google.maps.LatLng.