HTML5-Geolocation-Markierungsbewegung und Kartenaktualisierung

  • Ich arbeite gerade an einer ortsbezogenen App für ein Schulprojekt. Das folgende Skript zeichnet die Karte jedes Mal mit einem neuen Marker, wenn das GPS aktualisiert wird, und hinterlässt Spuren von Markern. Wie mache ich es so, dass bei jeder GPS-Aktualisierung die Karte mit der aktualisierten Kartenmarkierung in der Mitte der Karte angezeigt wird (was der Fall ist, dass alle mobilen Karten-Apps die Bewegung der Markierung mit der Bewegung des Benutzers in Einklang bringen)? Vielen Dank.

     <!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>
     
    22 November 2011
    Adam Wenger
1 answer
  • Ich würde sagen, dass Sie am besten JavaScript-Code haben, der Ihre Seite zwingt, in einem bestimmten Intervall neu zu laden. Hier ist ein Code, der Ihnen helfen soll:

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

    Sie möchten die window.location.reload ( true) in Ihre Aktualisierungsfunktion und übergeben Sie die Aktualisierungsmethode an die setTimeout-Methode, z. B.

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

    Dann werden Sie ruft window.location.reload vermutlich auf, nachdem Sie die Benutzerkoordinaten an den Server zurückgegeben haben.

    Ich hoffe, das hilft!

    20 January 2012
    dmarges