javascript - Google maps: Live drawing and updating a Polyline - Stack Overflow

admin管理员组

文章数量:1208155

I'm really newbie in JS, so sorry, that I have no my code attached, 'cause all what I did - "helloworld" examples from Google Map Docs.

So, what's a problem: I want to draw a polyline depending on user's current position. So, each one google.maps.LatLng() should have coordinates at the moment. On the map should emerge the whole way updating, for example, once per 5 seconds. At last point it's just like visualization of a morning walking on a map, something like that.

I know, how to "draw" a map and add points in var flightPlanCoordinates[], and I ask for some examples or links, where I can find:

• How add a current position into var flightPlanCoordinates[]
• How make all this stuff updating in "live" mode

Thanks for any help :)

UPD:

trying to do stuff like this, but doesn't work

var path = poly.getPath();

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

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

UPD2: here's cool example, how it should be /

I'm really newbie in JS, so sorry, that I have no my code attached, 'cause all what I did - "helloworld" examples from Google Map Docs.

So, what's a problem: I want to draw a polyline depending on user's current position. So, each one google.maps.LatLng() should have coordinates at the moment. On the map should emerge the whole way updating, for example, once per 5 seconds. At last point it's just like visualization of a morning walking on a map, something like that.

I know, how to "draw" a map and add points in var flightPlanCoordinates[], and I ask for some examples or links, where I can find:

• How add a current position into var flightPlanCoordinates[]
• How make all this stuff updating in "live" mode

Thanks for any help :)

UPD:

trying to do stuff like this, but doesn't work

var path = poly.getPath();

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

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

UPD2: here's cool example, how it should be http://kasheftin.github.io/gmaps/

• javascript
• html
• google-maps
• google-polyline

Share Improve this question Follow edited Aug 25, 2014 at 15:51 geocodezip 161k1414 gold badges225225 silver badges255255 bronze badges asked Oct 29, 2013 at 17:21 RachnogRachnog 35311 gold badge77 silver badges1818 bronze badges 2

• What you want to do is look into HTML5 Geolocation API – Suvi Vignarajah Commented Oct 29, 2013 at 17:26
• trying to do stuff like this, but doesn't work var path = poly.getPath(); var latitude = position.coords.latitude; var longitude = position.coords.longitude; path.push(new google.maps.LatLng(latitude, longitude)); – Rachnog Commented Oct 29, 2013 at 18:40

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 12

You need to update the polyline with the new path (the path that has been updated with the new point):

// 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 snippet: (click on map to add points to the polyline)

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

Try the code below:

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

As of now, the API allows you to only have to push the new LatLng object to the path for it to be updated on the map.

As their Complex Polyline example shows, you can do:

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

Where poly is your google.maps.Polyline and latLng a google.maps.LatLng.

本文标签： javascriptGoogle maps Live drawing and updating a PolylineStack Overflow