谷歌地图：实时绘制和更新Polyline

我真的很新手在JS中，很抱歉，我没有附加我的代码，因为我所做的一切 - 来自Google Map Docs的“helloworld”示例。谷歌地图：实时绘制和更新Polyline

那么，什么是问题：我想根据用户的当前位置绘制折线。所以，每个google.maps.LatLng（）此刻应该有坐标。在地图上应该显示整个更新的过程，例如每5秒一次。最后，它就像是在地图上行走的早晨的可视化，就像那样。

我知道，如何“绘制”地图，在VAR flightPlanCoordinates []加分，我问一些例子或链接，在哪里可以找到：

怎么加电流位置到变种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/

来源

2013-10-29 Rachnog

你想要做的是调查[HTML5地理定位API]（https://developer.mozilla.org/en-US/docs/WebAPI/Using_geolocation） –

试图做这样的东西，但不起作用 'var path = poly.getPath（）; var latitude = position.coords.latitude; var longitude = position.coords。经度; path.push（new google.maps.LatLng（latitude，longitude））; ' – Rachnog

您需要使用新路径（已用新点更新的路径）更新多段线：

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

来源

2013-10-30 02:33:52 geocodezip

'function addLatLng（event）{ \t var path = poly.getPath（）; \t path.push（new google.maps.LatLng（position.coords.latitude，position.coords.longitude））; \t poly.setPath（path）; }'不起作用 – Rachnog

@geocodezip感谢队友救了我的时间:) – Harsha

尝试下面的代码：

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

来源

2014-10-15 18:16:32

截至目前，该API允许您只需将新的LatLng对象推送到path它会在地图上更新。

由于他们Complex Polyline例子显示，你可以这样做：

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

哪里poly为您google.maps.Polyline和latLng一个google.maps.LatLng。

来源

2016-03-10 17:25:17

谷歌地图：实时绘制和更新Polyline

回答

相关问题