2013-04-25 10 views
5

Muszę aktualizować tylko znacznik, gdy urządzenie się porusza lub gdy urządzenie uzyskuje większą dokładność. Kiedy zmiana pozycji również przeładuje mapę i muszę przenieść tylko producenta. Mam następujący kod:Geolokalizacja: przenoszenie tylko znaczników mapy google bez przeładowania mapy

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."); 
} 

Dzięki!

Odpowiedz

8

Uważam, że problem polega na tym, że tworzysz nową mapę wewnątrz funkcji watchPosition. Musisz tylko utworzyć jeden znacznik, a następnie zaktualizować jego pozycję w funkcji watchPosition.

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

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

Może ten przykład pomoże:

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

Można również znaleźć to użyteczne. http://google-maps-utility-library-v3.googlecode.com/svn/trunk/geolocationmarker/docs/reference.html –

3

jeden prosty sposób zrobić, to po prostu zadzwonić map.clearOverlays(); następnie odczytać dodać nowe pozycje z map.addOverlay(<marker>)