javascript 谷歌地图：实时绘制和更新折线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19665063/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google maps: Live drawing and updating a Polyline
提问by Rachnog
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.
我真的是 JS 新手，很抱歉，我没有附上我的代码，因为我所做的一切 - 来自 Google Map Docs 的“helloworld”示例。
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.
那么，有什么问题：我想根据用户的当前位置绘制多段线。因此，每个google.maps.LatLng()此刻都应该有坐标。地图上应该出现全程更新，比如每5秒一次。最后一点，就像早上走在地图上的可视化，类似的东西。
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:
我知道，如何“绘制”地图并在var flightPlanCoordinates[] 中添加点，我要求提供一些示例或链接，我可以在其中找到：
- How add a current position into var flightPlanCoordinates[]
- How make all this stuff updating in "live" mode
- 如何将当前位置添加到var flightPlanCoordinates[]
- 如何在“实时”模式下更新所有这些东西
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/
UPD2：这是一个很酷的例子，它应该如何http://kasheftin.github.io/gmaps/
回答by geocodezip
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"></script>
<div id="map_canvas"></div>回答by Leonardo Balzaretti
Try the code below:
试试下面的代码：
var path = poly.getPath().getArray();
path.push(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
poly.setPath(path);
回答by Balthazar
As of now, the API allows you to only have to push the new LatLngobject to the pathfor it to be updated on the map.
截至目前，该 API 允许您只需将新LatLng对象推送到path即可在地图上更新它。
As their Complex Polylineexample shows, you can do:
正如他们的复杂折线示例所示，您可以执行以下操作：
var path = poly.getPath()
path.push(latLng)
Where polyis your google.maps.Polylineand latLnga google.maps.LatLng.
当poly你google.maps.Polyline和latLng一个google.maps.LatLng。
