Javascript Google地图:实时绘制和更新多段线
我真的是JS的新手,很抱歉,我没有附上我的代码,因为我所做的一切——“helloworld”来自谷歌地图文档的例子 那么,问题是什么: 我想根据用户的当前位置绘制一条多段线。因此,每个google.maps.LatLng()此时都应该有坐标。地图上应该出现全程更新,例如,每5秒更新一次。在最后一点上,它就像一个早晨在地图上行走的形象,类似的东西 我知道如何“绘制”地图并在var FlightPlanCoordinations[]中添加点,我要求提供一些示例或链接,在这些示例或链接中我可以找到:Javascript Google地图:实时绘制和更新多段线,javascript,html,google-maps,google-polyline,Javascript,Html,Google Maps,Google Polyline,我真的是JS的新手,很抱歉,我没有附上我的代码,因为我所做的一切——“helloworld”来自谷歌地图文档的例子 那么,问题是什么: 我想根据用户的当前位置绘制一条多段线。因此,每个google.maps.LatLng()此时都应该有坐标。地图上应该出现全程更新,例如,每5秒更新一次。在最后一点上,它就像一个早晨在地图上行走的形象,类似的东西 我知道如何“绘制”地图并在var FlightPlanCoordinations[]中添加点,我要求提供一些示例或链接,在这些示例或链接中我可以找到:
- 如何将当前位置添加到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:
下面是一个很酷的示例,它应该是怎样的您需要使用新路径(使用新点更新的路径)更新多段线: 代码片段:(单击地图向多段线添加点)
函数初始化(){
var map=new google.maps.map(
document.getElementById(“地图画布”){
中心:新google.maps.LatLng(37.4419,-122.1419),
缩放:13,
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var poly=new google.maps.Polyline({
地图:地图,
路径:[]
})
google.maps.event.addListener(映射,'click',函数(evt){
//获取现有路径
var path=poly.getPath();
//添加新点(使用单击事件中的位置)
push(新的google.maps.LatLng(evt.LatLng.lat(),evt.LatLng.lng());
//使用更新的路径更新多段线
poly.setPath(path);
})
}
google.maps.event.addDomListener(窗口“加载”,初始化)代码>
html,
身体,
#地图画布{
身高:100%;
宽度:100%;
边际:0px;
填充:0px
}
请尝试以下代码:
var path = poly.getPath().getArray();
path.push(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
poly.setPath(path);
现在,API允许您只需将新的LatLng
对象推送到路径
即可在地图上更新
如他们的示例所示,您可以执行以下操作:
var path = poly.getPath()
path.push(latLng)
其中,poly
是您的google.maps.Polyline
和latLng
agoogle.maps.latLng
您想做的是尝试这样做,但不起作用var path=poly.getPath();变量纬度=位置坐标纬度;var经度=position.coords.longitude;push(新的google.maps.LatLng(纬度、经度))代码>
var path = poly.getPath()
path.push(latLng)