Javascript 传单地图：是否使用navigator.geolocation.watchPosition更新标记？

我正在尝试使用一个图标来显示用户在地图上的当前位置。有点像实时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();

代码：

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


map.removeLayer(marker)

         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();

---

嗯，我不清楚你为什么要用两种相同的方法来处理同一个问题。您正在使用和，它们做基本相同的事情。在这个代码段中没有任何用途，它只调用的

showLocation（position）

，它只初始化了两个变量。你正在使用的第二种方法是，你应该选择什么样的功能。在这里，您添加标记是正确的，但是关于，您必须使用

map.locate（）

将

watch

选项设置为

true

。您最好删除，只需执行以下操作：

---

下面是一个触发定位和添加带有圆圈的标记

嗯，我不清楚你为什么要用两种相同的方法来处理同一个问题。您正在使用和，它们做基本相同的事情。在这个代码段中没有任何用途，它只调用的

showLocation（position）

，它只初始化了两个变量。你正在使用的第二种方法是，你应该选择什么样的功能。在这里，您添加标记是正确的，但是关于，您必须使用

map.locate（）

将

watch

选项设置为

true

。您最好删除，只需执行以下操作：

---

---

下面是一个触发定位和添加带有圆圈的标记

您是否尝试在geoLoc.watchPosition（）回调中添加标记？@Manuel，这就是我在代码中所做的！因此，它会被添加一次，但标记的位置不会得到更新！我只看到你称之为“showLocation”的意思，请加一把小提琴，这样就可以了easier@Manuel，我的问题又添了一点麻烦。您是否尝试在geoLoc.watchPosition（）回调中添加标记？@Manuel，这就是我在代码中所做的！因此，它会被添加一次，但标记的位置不会得到更新！我只看到你称之为“showLocation”的意思，请加一把小提琴，这样就可以了easier@Manuel，我的问题又添了一点麻烦。谢谢曼纽尔。虽然，我有点困惑。因此，基本上，通过使用watch:true运行您的代码，地图就像一个实时GPS，它会随着设备的横向/纵向变化而更新标记？是的，这就是您想要做的吗？是的，这正是我想要做的。：。。。我不知道传单上提供了开箱即用（某种程度上）…啊，好的，我可以帮你：）如果你还有其他问题，不要害怕问！我刚刚在我的设备上测试了它，它似乎可以工作，但它没有删除“先前”标记。随着新位置（lat/long）的更新，它会不断添加新位置。所以基本上，地图上有很多标记。。有什么建议吗？谢谢曼纽尔。虽然，我有点困惑。因此，基本上，通过使用watch:true运行您的代码，地图就像一个实时GPS，它会随着设备的横向/纵向变化而更新标记？是的，这就是您想要做的吗？是的，这正是我想要做的。：。。。我不知道传单上提供了开箱即用（某种程度上）…啊，好的，我可以帮你：）如果你还有其他问题，不要害怕问！我刚刚在我的设备上测试了它，它似乎可以工作，但它没有删除“先前”标记。随着新位置（lat/long）的更新，它会不断添加新位置。所以基本上，地图上有很多标记。。有什么建议吗？

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();