HTML5地理位置標記移動和地圖更新

我正在爲學校項目開發基於位置的應用程序，並且以下腳本每次更新GPS時都會使用新標記繪製地圖，並留下標記痕跡。我該如何做到這一點，以便每當GPS更新地圖時顯示更新的地圖標記位於地圖的中心（這就像所有移動地圖應用程序根據用戶的移動移動標記一樣）？謝謝。HTML5地理位置標記移動和地圖更新

<!DOCTYPE html> 
<html> 
<head> 
<title>Geolocation default</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" /> 
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script> 
<script type="text/javascript"> 
    var map = null; 

    const POSITION_OPTIONS = {enableHighAccuracy:true, maximumAge:30000, timeout:27000}; 

    function GetMap() { 
     map = new Microsoft.Maps.Map(document.getElementById('myMap'), { credentials: 'ArqqdSR0U_ZzTkRh5W_3p0yukEEJ5X0L5QE9rg1CK1uyWgGz1n0Fi_-c2i2IfSN6' }); 
     GetLocation(); 
    } 

    function GetLocation() { 
     //check if location api supported 
     if (!!navigator.geolocation) { 

      //Update location 
      navigator.geolocation.watchPosition(UpdateLocation,HandleErrors,POSITION_OPTIONS); 
     } 
    } 

    function UpdateLocation(position) { 
     var latitude = position.coords.latitude; 
     var longitude = position.coords.longitude; 

     //move map to new location and zoom in 
     map.setView({ center: { latitude: latitude, longitude: longitude }, zoom: 16, mapTypeId: Microsoft.Maps.MapTypeId.aerial }); 

     var loc = new Microsoft.Maps.Location(latitude, longitude); 

     var pin = new Microsoft.Maps.Pushpin(loc); 
     map.entities.push(pin); 
    } 

    function HandleErrors(error) { 
     //handle geolocation errors and alert user 
     switch (error.code) { 
      case error.PERMISSION_DENIED: alert("user did not share geolocation data"); 
       break; 

      case error.POSITION_UNAVAILABLE: alert("could not detect current position"); 
       break; 

      case error.TIMEOUT: alert("retrieving position timed out"); 
       break; 

      default: alert("unknown error"); 
       break; 
     } 
    } 

</script> 

</head> 
<body onload="GetMap();" style="padding:0;margin:0;"> 

<div id="myMap" style="position: absolute; width: 100%; height: 100%;"> 
</div> 

</body> 
</html>

來源

2011-11-21 Jonathan Lo

我會說你最好的辦法是讓一些JavaScript代碼強制你的頁面在給定的時間間隔內重新加載。下面是一些代碼來幫助你：

var t = setTimeout("window.location.reload(true)",3000);

你會希望把window.location.reload（真）在您的更新功能，並通過更新方法爲setTimeout的方法，例如，

var t = setTimeout("UpdateLocation()",3000);

然後，您可能會在您將用戶座標傳遞迴服務器後調用window.location.reload。

希望這會有所幫助！

來源

2012-01-20 19:52:11 dmarges

HTML5地理位置標記移動和地圖更新

回答

相關問題