Постоянно перемещайте маркер в соответствии с местоположением пользователя - PullRequest
Новая
       2

Постоянно перемещайте маркер в соответствии с местоположением пользователя

0 голосов
/ 02 октября 2018

Я создаю веб-страницу, на которой сначала определяется местоположение пользователя, а затем обновляется карта с текущим местоположением пользователя, показывая маркер пользователю, где он сейчас находится.Но я хочу получить местоположение пользователя непрерывно после 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>

Может кто-нибудь, пожалуйста, помогите мне решить эту проблему?

1 Ответ

0 голосов
/ 02 октября 2018

Я думал о чем-то вроде этого:

Не проверял, дайте мне знать, если это работает; -) 

<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 , решает проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...