傳單地圖：使用navigator.geolocation.watchPosition更新標記？

Question

我試圖用leaflet map來顯示用戶在地圖上的當前位置。就像現場的GPS跟蹤。

這是我當前的代碼：

var watchID; 
     var geoLoc; 

     function showLocation(position) { 
      var latitude = position.coords.latitude; 
      var longitude = position.coords.longitude; 
     } 

     function errorHandler(err) { 
      if(err.code == 1) { 
       alert("Error: Access is denied!"); 
      } 

      else if(err.code == 2) { 
       alert("Error: Position is unavailable!"); 
      } 
     } 

     function getLocationUpdate(){ 
      if(navigator.geolocation){ 
       // timeout at 60000 milliseconds (60 seconds) 
       var options = {timeout:60000}; 
       geoLoc = navigator.geolocation; 
       watchID = geoLoc.watchPosition(showLocation, errorHandler, options); 
       var map = L.map('map_2385853') 

    googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{ 
    maxZoom: 20, 
    subdomains:['mt0','mt1','mt2','mt3'] 
}).addTo(map); 

     /*L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', { 
     attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>', 
     maxZoom: 18 
     }).addTo(map);*/ 

     map.locate({setView: true, maxZoom: 16}); 
     function onLocationFound(e) { 
     var radius = e.accuracy/2; 
     L.marker(e.latlng).addTo(map) 
      .bindPopup("You are within " + radius + " meters from this point").openPopup(); 
     L.circle(e.latlng, radius).addTo(map); 
     } 
     map.on('locationfound', onLocationFound); 




      } 

      else{ 
       alert("Sorry, browser does not support geolocation!"); 
      } 
     } 




getLocationUpdate(); 

此代碼僅添加了標記一次，並沒有做任何其他與它（不刪除或添加其他）用戶的位置發生變化時。

我在移動設備上試過上面的代碼，我可以確認標記只添加一次並停留在那裏。

請問有人能提供這方面的建議嗎？

這裏是一個工作FIDDLE：

https://jsfiddle.net/31ws6z37/

編輯：

這是我到目前爲止所。但我得到以下錯誤：

錯誤：

TypeError: map.removeLayer(...).bindPopup is not a function 


map.removeLayer(marker) 

CODE：

  function initializeMapAndLocator(){ 

       var map = L.map('map_2385853'); 


    googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{ 
    maxZoom: 20, 
    subdomains:['mt0','mt1','mt2','mt3'] 
}).addTo(map); 



      map.locate({setView: true, 
         maxZoom: 16, 
         watch:true, 
         timeout: 60000 
         }); 

     function onLocationFound(e) { 
     var radius = e.accuracy/2; 
     //L.marker(e.latlng).addTo(map) 
     marker = new L.Marker(e.latlng, {draggable:true}) 
     map.addLayer(marker) 
     map.removeLayer(marker) 
      .bindPopup("You are within " + radius + " meters from this point").openPopup(); 
     L.circle(e.latlng, radius).addTo(map); 
     } 
     map.on('locationfound', onLocationFound); 



     } 

initializeMapAndLocator(); 

Answer 1

嗯，目前還不清楚，我爲什麼要使用，對於相同的兩個相同的方法做法。您使用的是Geolocation.watchPosition()和map.locate()，它們的基本原理完全相同。在這個片段Geolocation.watchPosition()沒有目的，它只調用的showLocation(position)，它只是初始化兩個變量。你正在使用的第二種方法是map.locate()，你應該選擇什麼功能。在這裏，您正在做的是添加標記的權利，但對於docs，您必須使用map.locate()將watch選項設置爲true。你會更好地去除Geolocation.watchPosition()，並把它簡單地map.locate()：

function initializeMapAndLocator(){ 

var map = L.map('map_2385853') 

googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{ 
     maxZoom: 20, 
     subdomains:['mt0','mt1','mt2','mt3'] 
    }).addTo(map); 



map.locate({setView: true, 
      maxZoom: 16, 
      watch:true 
      }); 

function onLocationFound(e) { 
    var radius = e.accuracy/2; 
    L.marker(e.latlng).addTo(map) 
     .bindPopup("You are within " + radius + " meters from this point").openPopup(); 
    L.circle(e.latlng, radius).addTo(map); 
} 

map.on('locationfound', onLocationFound); 

} 


initializeMapAndLocator(); 

這裏去一個FIDDLE觸發定位並添加標記有圓圈。