Google maps: Rysowanie na żywo i aktualizowanie polilinii

Question

Jestem naprawdę początkującym użytkownikiem w JS, przepraszam, że nie mam załączonego mojego kodu, ponieważ wszystko co zrobiłem - przykłady "helloworld" z Google Map Docs.

Jaki jest problem: Chcę narysować polilinię w zależności od aktualnej pozycji użytkownika. Tak więc każdy z nich musi mieć współrzędne w tej chwili google.maps.LatLng(). Na mapie powinien pojawić się cały proces aktualizacji, na przykład raz na 5 sekund. W końcu jest to jak wizualizacja porannego spaceru na mapie, coś w tym rodzaju.

wiem, jak „wyciągnąć” mapę i dodać punkty w var flightPlanCoordinates [] i poprosić o kilka przykładów lub linki, gdzie mogę znaleźć:

• Jak dodać prąd stanowisko do var flightPlanCoordinates []
• Jak zrobić to wszystko aktualizację w trybie "na żywo"

dzięki za pomoc :)

UPD:

staramy się robić rzeczy, jak to, ale nie działa

var path = poly.getPath(); 

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

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

UPD2: oto fajny przykład, jak należy http://kasheftin.github.io/gmaps/

Answer 1

Należy zaktualizować polilinię za pomocą nowej ścieżki (ścieżki, która została zaktualizowana nowym punktem):

// 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); 

fragment kodu: (kliknij na mapę, aby dodać punkty do polilinii)

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

Wypróbuj poniższy kod:

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

Answer 3

W chwili obecnej, API pozwala ci tylko popchnąć nowy obiekt LatLng do path, aby został zaktualizowany na mapie.

Ponieważ ich Complex Polyline przykład pokazuje, można zrobić:

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

Gdzie poly to google.maps.Polyline i latLnggoogle.maps.LatLng.