Javascript 当用户'；s的位置发生变化_Javascript_Api_Geolocation_Location_Maps

Javascript 当用户'；s的位置发生变化

javascript api geolocation maps

Javascript 当用户'；s的位置发生变化,javascript,api,geolocation,location,maps,Javascript,Api,Geolocation,Location,Maps,我有一些Javascript谷歌地图API代码，我只是想让我的标记随着用户地理位置的变化而不断移动。我看了无数的教程，但没法让它发挥作用，我对JS是新手，所以我尝试做的任何小改动都会破坏应用程序。请任何人在下面的代码中建议如何实现这一点： <!DOCTYPE html> <html> <head> <link href="style.css" rel="stylesheet" type="text/css"></link>

我有一些Javascript谷歌地图API代码，我只是想让我的标记随着用户地理位置的变化而不断移动。我看了无数的教程，但没法让它发挥作用，我对JS是新手，所以我尝试做的任何小改动都会破坏应用程序。请任何人在下面的代码中建议如何实现这一点：

<!DOCTYPE html>
<html>
  <head>
    <link href="style.css" rel="stylesheet" type="text/css"></link>
    <link rel="icon" href="images/icon1.png">
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <link rel="icon" href="mada">


  </head>
  <body>

    <div id="map"></div>

    <script>
    var map, infoWindow;
    function initMap() {
      var uluru = {lat: 53.807081, lng: -1.555848};
      map = new google.maps.Map(document.getElementById('map'), {
        center: uluru,
        zoom: 16
      });


      var marker = null;

      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          var pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          };
      //Mark User Location
          if (marker == null) {
            var marker = new google.maps.Marker({
              position: {
                lat: position.coords.latitude,
                lng: position.coords.longitude
              },
              map: map,
              icon:'http://me15sk.leedsnewmedia.net/betterways/personal_icon.png'
            });
          } else {
            marker.setPosition(map.getCenter());
          }

          //Popup Marker
          marker.addListener('click', function(){
          infoWindow.open(map, marker);
          });

          var infoWindow = new google.maps.InfoWindow({
               content: '<h2>My Location</h2>'
          });

          map.setCenter(pos);
        }, function() {
          handleLocationError(true, infoWindow, map.getCenter());
        });

      }
    }

    </script>

    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=---&callback=initMap">
    </script>

  </body>
</html>


var映射，信息窗口；
函数initMap（）{
var uluru={lat:53.807081，lng:-1.555848}；
map=new google.maps.map（document.getElementById（'map'）{
中心：乌卢鲁，
缩放：16
});
var-marker=null；
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
var pos={
纬度：位置坐标纬度，
lng:position.coords.longitude
};
//标记用户位置
如果（标记==null）{
var marker=new google.maps.marker({
职位：{
纬度：位置坐标纬度，
lng:position.coords.longitude
},
地图：地图，
图标：'http://me15sk.leedsnewmedia.net/betterways/personal_icon.png'
});
}否则{
marker.setPosition（map.getCenter（））；
}
//弹出标记
marker.addListener（'click'，function（））{
信息窗口。打开（地图、标记）；
});
var infoWindow=new google.maps.infoWindow({
内容：“我的位置”
});
地图设置中心（pos）；
}，函数（）{
handleLocationError（true，infoWindow，map.getCenter（））；
});
}
}

您可以使用以下内容：

<!DOCTYPE html>
<html>
  <head>
    <link href="style.css" rel="stylesheet" type="text/css"></link>
    <link rel="icon" href="images/icon1.png">
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <link rel="icon" href="mada">
  </head>
  <body>

    <div id="map"></div>

    <script>
        var map, infoWindow, timerId, marker;

        function initMap() {
            var uluru = {lat: 53.807081, lng: -1.555848};
            map = new google.maps.Map(document.getElementById('map'), {
                center: uluru,
                zoom: 16
            });

            var infoWindow = new google.maps.InfoWindow({
                content: '<h2>My Location</h2>'
            });

            if (navigator.geolocation) {
                updateUserPosition();
            }
        }

        function updateUserPosition(){
            navigator.geolocation.getCurrentPosition(function (position) {
                var pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                //Mark User Location
                if (marker == null) {
                    var marker = new google.maps.Marker({
                        position: {
                            lat: position.coords.latitude,
                            lng: position.coords.longitude
                        },
                        map: map,
                        icon:'http://me15sk.leedsnewmedia.net/betterways/personal_icon.png'
                    });
                    marker.addListener('click', function(){
                        infoWindow.open(map, marker);
                    });
                } else {
                    marker.setPosition(map.getCenter());
                }
                map.setCenter(pos);
                timerId = setTimeout(updateUserPosition, 1000); //Setting timeout to get new position after 1 second
            }, function() { 
                handleLocationError(true, infoWindow, map.getCenter())
            })
        }
    </script>

    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=---&callback=initMap">
    </script>

  </body>
</html>


var映射、信息窗口、timerId、标记；
函数initMap（）{
var uluru={lat:53.807081，lng:-1.555848}；
map=new google.maps.map（document.getElementById（'map'）{
中心：乌卢鲁，
缩放：16
});
var infoWindow=new google.maps.infoWindow({
内容：“我的位置”
});
if（导航器.地理位置）{
updateUserPosition（）；
}
}
函数updateUserPosition（）{
navigator.geolocation.getCurrentPosition（函数（位置）{
var pos={
纬度：位置坐标纬度，
lng:position.coords.longitude
};
//标记用户位置
如果（标记==null）{
var marker=new google.maps.marker({
职位：{
纬度：位置坐标纬度，
lng:position.coords.longitude
},
地图：地图，
图标：'http://me15sk.leedsnewmedia.net/betterways/personal_icon.png'
});
marker.addListener（'click'，function（））{
信息窗口。打开（地图、标记）；
});
}否则{
marker.setPosition（map.getCenter（））；
}
地图设置中心（pos）；
timerId=setTimeout（updateUserPosition，1000）；//设置超时以在1秒后获取新位置
}，函数（）{
handleLocationError（true，infoWindow，map.getCenter（））
})
}

只需设置计时器，whitch将调用代码以获取新用户的位置，并在1秒内移动标记和地图（就像在我的代码中一样），或者编写我们自己的时间间隔。

您需要使用watchPosition（）获取更新。我尝试了watchPosition，但没能让它正常工作。谢谢，这让我离它工作又近了一步。在这个例子中，新的标记不断繁殖，但旧的标记仍然存在。我如何在新的标记出现之前让原来的标记消失？我想我刚刚让它工作了，谢谢你的帮助！