Question

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

Answer 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秒内移动标记和地图（如在我的代码中）或写下我们自己的时间间隔。

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

1 个答案: