实时跟踪路线地图api V3

我希望用户能够实时走路时绘制路线。我已经有了用户的位置，但我不知道如何进步。实时跟踪路线地图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{ 
 
\t background-color:#6F9!important; 
 
\t color:#000!important; 
 
\t } 
 

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

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

我想在用户行走的路线在地图上画出

来源

2016-10-10 Ana Caroline

您可以尝试使用这些：

对于行走的具体说明，使用Google Maps Directions API。

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

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

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

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

Polyline类定义了地图上连接线段的线性叠加。 A 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特别是关于地图API实现这些限制。

为了更好的理解，请尝试通过单证去，你也可以检查这些附加参考：

Map Coverage Details这表明在一个国家逐国基础的覆盖面细节。
PubNub文章为样本实现代码
- Google Maps Geolocation Tracking in Realtime with JavaScript
- Broadcasting Geolocation Data with HTML5 Location Services

希望这有助于！

来源

2016-10-12 15:59:18 Teyam

实时跟踪路线地图api V3

回答

相关问题