Geolocation: Verschieben nur Google Maps Marker ohne die Karte neu zu laden

Ich muss nur die Markierung aktualisieren, wenn das Gerät bewegt oder wenn das Gerät mehr Genauigkeit erhält. Wenn die Position geändert wird, lade auch die Map neu und ich muss nur den Maker bewegen. Ich habe folgenden Code:Geolocation: Verschieben nur Google Maps Marker ohne die Karte neu zu laden

if (navigator.geolocation) { 
    navigator.geolocation.watchPosition(

    function(position){ 
    var latitude = position.coords.latitude; 
    var longitude = position.coords.longitude; 
    var accuracy = position.coords.accuracy; 
    var coords = new google.maps.LatLng(latitude, longitude); 
    var mapOptions = { 
     zoom: 20, 
     center: coords, 
     streetViewControl: false, 
     mapTypeControl: false, 
     navigationControlOptions: { 
      style: google.maps.NavigationControlStyle.SMALL 
     }, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

    var capa = document.getElementById("capa"); 
    capa.innerHTML = "latitud: " + latitude + " longitud: " + " aquesta es la precisio en metres : " + accuracy; 

     map = new google.maps.Map(
      document.getElementById("mapContainer"), mapOptions 
      ); 
     var marker = new google.maps.Marker({ 
       position: coords, 
       map: map, 
       title: "ok" 
     }); 


    },function error(msg){alert('Please enable your GPS position future.'); 

    }, {maximumAge:0, timeout:5000, enableHighAccuracy: false}); 

}else { 
    alert("Geolocation API is not supported in your browser."); 
}

Vielen Dank!

Quelle

2013-04-25 Francesc VE

Ich glaube, dass das Problem ist, dass Sie eine neue Karte innerhalb der WatchPosition-Funktion erstellen. Sie müssen nur einen Marker erstellen und dann seine Position innerhalb der Funktion "watchPosition" aktualisieren.

navigator.geolocation.watchPosition(
    function (position) { 
     setMarkerPosition(
      currentPositionMarker, 
      position 
     ); 
    }); 

function setMarkerPosition(marker, position) { 
    marker.setPosition(
     new google.maps.LatLng(
      position.coords.latitude, 
      position.coords.longitude) 
    ); 
}

Vielleicht wird dieses Beispiel Ihnen helfen:

<!doctype html> 
<html lang="en"> 

    <head> 
     <title>Google maps</title> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script> 
     <script type="text/javascript"> 

      var map, 
       currentPositionMarker, 
       mapCenter = new google.maps.LatLng(40.700683, -73.925972), 
       map; 

      function initializeMap() 
      { 
       map = new google.maps.Map(document.getElementById('map_canvas'), { 
        zoom: 13, 
        center: mapCenter, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }); 
      } 

      function locError(error) { 
       // the current position could not be located 
       alert("The current position could not be found!"); 
      } 

      function setCurrentPosition(pos) { 
       currentPositionMarker = new google.maps.Marker({ 
        map: map, 
        position: new google.maps.LatLng(
         pos.coords.latitude, 
         pos.coords.longitude 
        ), 
        title: "Current Position" 
       }); 
       map.panTo(new google.maps.LatLng(
         pos.coords.latitude, 
         pos.coords.longitude 
        )); 
      } 

      function displayAndWatch(position) { 
       // set current position 
       setCurrentPosition(position); 
       // watch position 
       watchCurrentPosition(); 
      } 

      function watchCurrentPosition() { 
       var positionTimer = navigator.geolocation.watchPosition(
        function (position) { 
         setMarkerPosition(
          currentPositionMarker, 
          position 
         ); 
        }); 
      } 

      function setMarkerPosition(marker, position) { 
       marker.setPosition(
        new google.maps.LatLng(
         position.coords.latitude, 
         position.coords.longitude) 
       ); 
      } 

      function initLocationProcedure() { 
       initializeMap(); 
       if (navigator.geolocation) { 
        navigator.geolocation.getCurrentPosition(displayAndWatch, locError); 
       } else { 
        alert("Your browser does not support the Geolocation API"); 
       } 
      } 

      $(document).ready(function() { 
       initLocationProcedure(); 
      }); 

     </script> 
    </head> 

    <body> 
     <div id="map_canvas" style="height:600px;"></div> 
    </body> 

</html>

Quelle

2013-04-25 19:00:40

können Sie auch diese nützlich finden. http://google-maps-utility-library-v3.googlecode.com/svn/trunk/geolocationmarker/docs/reference.html –

eine einfache Möglichkeit zu tun, rufen Sie einfach map.clearOverlays(); dann lesen sie mit neuen Positionen hinzufügen map.addOverlay(<marker>)

Quelle

2013-10-31 15:26:08 amit

Geolocation: Verschieben nur Google Maps Marker ohne die Karte neu zu laden

Antwort

Verwandte Themen