Question

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

有人可以帮助我吗？

＆＃13;

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

＆＃13;

我希望在用户步行时，路线上绘制的地图

Answer 1

您可以尝试使用这些：

要行走特定路线，请使用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

希望这有帮助！

跟踪路线实时地图api V3

1 个答案: