HTML5 перемещение маркера геолокации и обновление карты - PullRequest
Новая
       6

HTML5 перемещение маркера геолокации и обновление карты

1 голос
/ 22 ноября 2011

Я работаю над приложением на основе определения местоположения для школьного проекта, и следующий скрипт каждый раз обновляет карту с новым маркером, оставляя следы маркеров.Как сделать так, чтобы при каждом обновлении GPS карта отображалась с обновленным маркером карты, расположенным в центре карты (как это делает все мобильное приложение карты с маркером, перемещающимся в соответствии с движением пользователя)?Спасибо. 

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

1 Ответ

0 голосов
/ 20 января 2012

Я бы сказал, что вам лучше всего иметь некоторый код JavaScript, который заставляет вашу страницу обновляться через определенный интервал.Вот некоторый код, который может вам помочь: 

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

Вы бы хотели поместить window.location.reload (true) в вашу функцию обновления и передать метод обновления в метод setTimeout, например; 

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

Тогда вы, вероятно, вызовете window.location.reload после того, как передадите пользовательские координаты обратно на сервер.

Надеюсь, это поможет!

...