地理位置：只移動Google地圖標記而不重新加載地圖

我只需要在設備移動或設備獲得更高精度時更新標記。當位置變化也重新加載地圖，我只需要移動製造商。我有以下代碼：地理位置：只移動Google地圖標記而不重新加載地圖

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

謝謝！

來源

2013-04-25 Francesc VE

我認爲問題在於您在watchPosition函數內部創建了一個新映射。您只需要創建一個標記，然後更新其在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) 
    ); 
}

也許這個例子可以幫助你：

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

來源

2013-04-25 19:00:40

您也可以發現這很有用。 Google地圖 – 2013-10-04 19:47:48

一個簡單的辦法是，只需調用map.clearOverlays();然後讀添加新的位置與map.addOverlay(<marker>)

來源

2013-10-31 15:26:08 amit

地理位置：只移動Google地圖標記而不重新加載地圖

回答

相關問題