實時跟蹤路線地圖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

回答

相關問題