Как предотвратить создание новых кругов при изменении центра круга.(Google Maps API) - PullRequest
Новая
       41

Как предотвратить создание новых кругов при изменении центра круга.(Google Maps API)

0 голосов
/ 10 июля 2019

Я создаю веб-приложение, которое показывает местоположение, наиболее близкое к текущей позиции пользователя и выбранному маршруту.Проблема в том, что я использую простую анимацию круга для отображения местоположения пользователя на карте, и каждый раз, когда позиция пользователя изменяется, создается новый круг.

    var circle;
    var smallCircle;

    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
      } else {
        alert("Sorry the geolocation failed");
      }
    }

    function showPosition(position) {
        const pos =
        {
       lat: position.coords.latitude,
       lng: position.coords.longitude
        };
       console.log(pos);
       locationMarker(pos);
    }

    function locationMarker(user){

     if (smallCircle != null & circle != null) {


          circle.setCenter(user);
          smallCircle.setCenter(user);
          map.panTo(user);

        } else {

          smallCircle = new google.maps.Circle({
             center: user,
             radius: 5,
             strokeColor: "#1abc9c",
             strokeOpacity: 1,
             strokeWeight: 1,
             fillColor: "#1abc9c",
             fillOpacity: 0.5
          });

          circle = new google.maps.Circle({
             center: user,
             radius: 20,
             strokeColor: "#1abc9c",
             strokeOpacity: 1,
             strokeWeight: 1,
             fillColor: "#1abc9c",
             fillOpacity: 0.5
          });

          circle.setMap(map);
          smallCircle.setMap(map);

          // This is the animation
          var direction = 0.8;
          var rMin = 5, rMax = 20;
          setInterval(function() {
              var radius = circle.getRadius();
              if ((radius > rMax) || (radius < rMin)) {
                  direction *= -1;
              }
              circle.setRadius(radius + direction * 0.4);
              }, 50);

        }
    }

Я попытался использовать оператор if, чтобы объявить, что в случае, если круг уже существует, он должен изменить его центр (положение).В противном случае, он должен создать новый.

Я ожидаю создать только одну анимацию круга, и она может перецентрироваться каждый раз, когда пользователь меняет свою позицию, но сейчас он создает новый круг при изменении позиции.

* Обновить сейчас, чтоЯ удалил параметры круга из функции, с которой он работает.:)

1 Ответ

1 голос
/ 10 июля 2019

Функция, в которой вы рисуете круги, кажется, принимает круги в качестве параметров. 

function locationMarker(user, circle, smallCircle)

Но когда вы на самом деле вызываете эту функцию showPosition, вы просто передаете ей местоположение пользователя. 

locationMarker(pos);

Из-за этого параметры функции circle и smallCircle будут иметь значение NULL, а поскольку они входят в область действия функции, они получат «приоритет» над объявленными глобальными переменными circle и smallCircle. вверху скрипта.

РЕДАКТИРОВАТЬ: Пример был обновлен, так что circle и smallCircle теперь передаются в функцию, но все еще есть проблема. Когда вы создаете круги и присваиваете им circle и smallCircle, вы присваиваете параметрам функции, которые полностью отделены от глобальных окружностей, объявленных вверху. Как только функция выходит из области видимости, эти параметры исчезают, а глобальные переменные остаются неизменными.

Решение: удалить параметры круга из функции и полагаться исключительно на глобальные переменные 

function locationMarker(user)
...