javascript - 谷歌地图 : Live drawing and updating a Polyline

Question

我真的是 JS 的新手，很抱歉，我没有附上我的代码，因为我所做的一切 - 来自 Google Map Docs 的“helloworld”示例。

所以，有什么问题: 我想根据用户的当前位置绘制一条折线。因此，目前每个 google.maps.LatLng() 都应该有坐标。 map 上应该出现全程更新，比如每5秒一次。最后一点就像早上在 map 上行走的可视化，类似的东西。

我知道如何“绘制” map 并在 var flightPlanCoordinates[] 中添加点，我要求提供一些示例或链接，我可以在其中找到:

• 如何将当前位置添加到 var flightPlanCoordinates[]
• 如何让所有这些东西在“实时”模式下更新

感谢您的帮助:)

更新:

尝试做这样的事情，但行不通

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

代码片段:(点击 map 向折线添加点)

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>