当用户的位置发生变化时，我试图让我的地图标记移动答案

【问题标题】：I am trying to get my map marker to move when the user's position changes当用户的位置发生变化时，我试图让我的地图标记移动
【发布时间】：2018-04-19 22:39:12
【问题描述】：

我有一些有效的 Javascript Google Maps 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>

【问题讨论】：

您需要使用 watchPosition() 来获取更新。
我已经尝试了 watchPosition，但没有成功。

标签： javascript api geolocation location maps

【解决方案1】：

你可以这样使用：

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

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

【讨论】：

感谢它让我更接近它的工作。在此示例中，新标记不断产生，但旧标记仍然存在。如何让原始标记在新标记出现之前消失？
我想我刚刚成功了，感谢您的帮助！