Google地图:实时绘制和更新折线

Question

我真的是JS的新手,很抱歉,我没有附加任何代码,因为我所做的一切 - 来自Google Map Docs的"helloworld"示例.

那么,有什么问题:我想根据用户的当前位置绘制折线.所以,每个google.maps.LatLng()都应该有坐标.在地图上应该出现整个更新方式,例如,每5秒更新一次.最后一点,就像在地图上行走的早晨的可视化,就像那样.

我知道,如何"绘制"地图并在var flightPlanCoordinates []中添加点,我要求一些示例或链接,我可以在其中找到:

• 如何将当前位置添加到var flightPlanCoordinates []
• 如何在"实时"模式下更新所有这些内容

谢谢你的帮助 :)

UPD:

试图做这样的事情,但不起作用

var path = poly.getPath();

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

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

UPD2:这是一个很酷的例子,应该如何http://kasheftin.github.io/gmaps/

Answer 1

您需要使用新路径更新折线(使用新点更新的路径):

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

代码段:(点击地图将点添加到折线)

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>