Question

我正在创建一个网页，它首先在其中获取用户位置，然后通过向用户显示当前位置标记来使用用户当前位置更新地图。但是我想在500毫秒后连续获取用户位置，但是它再次向用户显示弹出窗口以允许其位置。但是我希望，如果用户允许先前的内容，则弹出窗口将不会再次显示给他。这是我的。

<html>
<head>
 <title>Map with live marker</title>
 <meta name="viewport" content="initial-scale=1.0">
</head>
<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
<body>
<div id="map"></div>
<script>
  var lat=0;
  var lng=0;
  var map;
  function getUserlocation(){
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        lat = position.coords.latitude;
        lng = position.coords.longitude; 
        // initMap();
        console.log(lat,lng);          
      });
    } else {
        alert("Geolocation is not supported by this browser.");
    }        
  }

  function initMap() {
    var myLatLng = {lat: lat, lng: lng};
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: lat, lng: lng},
      zoom: 30
    });
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
    });
  }
  setInterval(function(){
    getUserlocation();
  },500);
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=Apikey"></script>
</body>
</html>

有人可以帮助我解决此问题吗？

Answer 1

我在想这样的事情：

没有测试过让我知道它是否有效;-）

<html>
  <head>
    <title>Map with live marker</title>
    <meta name="viewport" content="initial-scale=1.0">
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

      var map;
      var marker;

      if (navigator.geolocation) {
        // watch for user movement
        navigator.geolocation.watchPosition(function(position) {
          var lat = position.coords.latitude;
          var lng = position.coords.longitude;
          console.log(lat,lng);
          var myLatLng = {lat: lat, lng: lng}
          initMap(myLatLng);
        });
      } else {
        alert("Geolocation is not supported by this browser.");
      }

      function initMap(myLatLng) {

        // create the map if it doesn't exist yet
        if(!map) {
          map = new google.maps.Map(document.getElementById('map'), {
            center: myLatLng,
            zoom: 30
          });
        }
        // optional for centering the map on each user movement:
        else {
          map.setCenter(myLatLng)
        }

        // create the marker if it doesn't exist yet
        if(!marker) {
          marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: 'Hello World!'
          });
        } else {
          // update the markers position
          marker.setPosition(myLatLng);
        }

      }

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=Apikey"></script>
  </body>
</html>

编辑

只需将html文件拖放到浏览器中，就对其进行了测试，并遇到了与您相同的问题。看来，浏览器未设置本地文件的权限。

运行serve之类的本地Web服务器可以解决此问题。

根据用户位置连续移动标记

1 个答案: