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>

Answer 2

尝试以下代码：

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

Answer 3

截至目前，API允许您只需将新的LatLng对象推送到path即可在地图上进行更新。

正如他们的Complex Polyline示例所示，您可以这样做：

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

poly google.maps.Polyline和latLng google.maps.LatLng {。}}。{/ p>

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

3 个答案: