javascript - 实时跟踪路线Maps API V3

我希望用户能够在行走时实时绘制路线。我已经有了用户的位置，但是我不知道该如何进行。

有人能帮我吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Maps Geolocation</title>

<style>

.success{
	background-color:#6F9!important;
	color:#000!important;
	}

#status{
	padding:5px;
	background-color:#000;
	color:#fff;}

</style>
</head>

<body>

<section id="wrapper">

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <article>
      <p><span id="status">Please wait whilst we try to locate you...</span></p>
    </article>
<script>


function success(position) {
  var s = document.querySelector('#status');

  if (s.className == 'success') {
    return;
  }

  s.innerHTML = "found you!";
  s.className = 'success';

  var mapcanvas = document.createElement('div');
  mapcanvas.id = 'mapcanvas';
  mapcanvas.style.height = '800px';
  mapcanvas.style.width = '100%';

  document.querySelector('article').appendChild(mapcanvas);

  var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var myOptions = {
    zoom: 16,
    center: latlng,
   // styles: styles,
    mapTypeControl: false
  };

  var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);

  var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title:"You are here!"
  });
}

function error(msg) {
  var s = document.querySelector('#status');
  s.innerHTML = typeof msg == 'string' ? msg : "failed";
  s.className = 'fail';

  // console.log(arguments);
}

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, error);
} else {
  error('not supported');
}

</script>
</section>

</body>
</html>

我要在用户行走时在地图上绘制路线

最佳答案

您可以尝试使用以下这些：

有关步行的特定方向，请使用Google Maps Directions API。

使用此API，travelMode是发送路线请求时的必填字段。但是，据我所知，这不能提供实时响应。
要获取实时位置，请使用Google Maps Geolocation API。

此API是特定于设备的，这意味着您使用的浏览器或设备必须支持地理位置才能使用此API。

注意：想要执行地理定位的应用程序必须支持W3C Geolocation standard。我还建议您检查6 Use-Cases and Requirements。

获取当前位置或方向后，您可以使用Polylines绘制路线。如文档中所述，

Polyline类定义了地图上连接的线段的线性覆盖。 Polyline对象由LatLng个位置数组组成，并创建一系列线段，这些线段以有序顺序连接这些位置。

这是一个简单的折线实现代码：

// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: 'terrain'
  });

  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

重要提示：我建议您特别检查Google Maps Terms of Service License Restrictions与Maps API实现有关的那些限制。

为了更好地理解，请尝试浏览文档，您也可以查看以下其他参考：

Map Coverage Details逐个国家显示覆盖范围详细信息。
有关示例实现代码的PubNub文章

Google Maps Geolocation Tracking in Realtime with JavaScript
Broadcasting Geolocation Data with HTML5 Location Services

希望这可以帮助！

关于javascript - 实时跟踪路线Maps API V3，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39958272/