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);

당신은 당신의 업데이트 기능에서 (TRUE)을 window.location.reload을 넣어 예에서는 setTimeout 방법으로 업데이트 방법을 전달하려는 것은;

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

그러면 사용자 좌표계를 서버에 다시 전달한 후 아마도 window.location.reload를 호출하게됩니다.

희망이 도움이됩니다.

출처

2012-01-20 19:52:11 dmarges

HTML5 위치 정보 마커 이동 및지도 업데이트

답변

관련 문제