传单地图：使用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触发定位并添加标记有圆圈。