我希望用户能够在行走时实时绘制路线。我已经有了用户的位置，但我不知道如何进行。
有人可以帮助我吗？
<!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 地理定位标准。我还建议您检查 6 用例和要求。
获取当前位置或方向后，您可以使用多段线绘制路线。如文档中所述，
类定义了地图上连接线段的线性叠加。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 API 实现的限制。
为了更好地理解，请尝试阅读文档，您还可以查看这些附加参考资料：
希望这有帮助！
这个链接可能有帮助，
还有其他类似的课程旅程分享