2013-04-25 14 views
5

Tôi chỉ cần cập nhật điểm đánh dấu khi thiết bị đang di chuyển hoặc khi thiết bị nhận được độ chính xác cao hơn. Khi thay đổi vị trí cũng tải lại bản đồ và tôi chỉ cần di chuyển nhà sản xuất. Tôi có mã sau:Vị trí địa lý: chỉ di chuyển điểm đánh dấu bản đồ google mà không cần tải lại bản đồ

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

Cảm ơn!

Trả lời

8

Tôi tin rằng vấn đề là bạn tạo một bản đồ mới bên trong hàm watchPosition. Bạn chỉ cần tạo một điểm đánh dấu và sau đó cập nhật vị trí của nó trong hàm 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) 
    ); 
} 

Có lẽ ví dụ này sẽ giúp bạn:

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

Bạn cũng có thể thấy hữu ích này. http://google-maps-utility-library-v3.googlecode.com/svn/trunk/geolocationmarker/docs/reference.html –

3

một cách dễ dàng để làm là, chỉ cần gọi map.clearOverlays(); sau đó đọc thêm vị trí mới với map.addOverlay(<marker>)