9

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

那么，有什么问题：我想根据用户的当前位置绘制一条折线。所以，每一个google.maps.LatLng()都应该有坐标。在地图上应该出现整个更新方式，例如每 5 秒一次。最后一点，它就像一个早晨在地图上行走的可视化，类似的东西。

我知道，如何“绘制”地图并在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/

4

3 回答 3

11

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

// 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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

于 2013-10-30T02:33:52.013 回答
2

试试下面的代码：

var path = poly.getPath().getArray();
path.push(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
poly.setPath(path);
于 2014-10-15T18:16:32.293 回答
1

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

正如他们的复杂折线示例所示，您可以执行以下操作：

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

你和一个. poly_google.maps.PolylinelatLnggoogle.maps.LatLng

于 2016-03-10T17:25:17.633 回答