Как можно отключить функцию navigator.geolocation.watchPosition()?

Question

CelestialCommander

vue

Как можно отключить функцию navigator.geolocation.watchPosition()?

Как можно отключить <code>navigator.geolocation.watchPosition()</code>? У меня есть метод, который запускает отслеживание местоположения по нажатию кнопки. Мне нужно, чтобы это отслеживание отключалось после размонтирования компонента. Я пробовал использовать <code>navigator.geolocation.clearWatch()</code>, но столкнулся с проблемой, так как не могу получить идентификатор отслеживания должным образом. Отслеживание должно начинаться только по нажатию кнопки, поэтому я не реализовал это так: <br/> <pre><code class="javascript">const id = navigator.geolocation.watchPosition((position) =&gt; {
    const { latitude, longitude } = position.coords;

    continousCoordinates.value = [
      longitude,
      latitude
    ]
  }, error, options);

onUnmounted(() =&gt; {
  navigator.geolocation.clearWatch(id);
})</code></pre> <br/> Вот как выглядит мой код: <br/> <pre><code class="javascript">// Метод включения наблюдения
const getContinuousPosition = () =&gt; {
  const id = navigator.geolocation.watchPosition((position) =&gt; {
    const { latitude, longitude } = position.coords;

    continousCoordinates.value = [
      longitude,
      latitude
    ]
  }, error, options);

  return id;
};

// Общий метод с помощью которого всё срабатывает
const postImmediate = () =&gt; {
  getContinuousPosition();

  // Http запрос
  store.postImmediateTask(user.value!.phone, user.value!.fullname, currDate, continousCoordinates.value!)
};

// Если изменяются координаты, то отправляет http запрос
watch(continousCoordinates, (newValue) =&gt; {
  if (newValue) {
    store.patchImmediateTask(user.value!.fullname, newValue);
  }
})

// Прекращение наблюдения при размонтировании
onUnmounted(() =&gt; {
  navigator.g

23 декабря 2024 г. 19:23

Ответы на вопрос 2

Похожие вопросы

Answer 1

Ваша проблема заключается в том, что вы не сохраняете идентификатор вызова `watchPosition` в доступном для функции `onUnmounted` контексте. Чтобы исправить это, вам нужно хранить идентификатор в области видимости, к которой можно получить доступ вне функции `getContinuousPosition`. 

Вот пример, как можно реализовать сохранение идентификатора и корректное выключение наблюдения при размонтировании компонента:

```javascript
let watchId; // Определяем переменную для идентификатора наблюдения

// Метод включения наблюдения
const getContinuousPosition = () => {
  // Сохраняем идентификатор в переменной watchId
  watchId = navigator.geolocation.watchPosition(
    (position) => {
      const { latitude, longitude } = position.coords;

      continousCoordinates.value = [
        longitude,
        latitude,
      ];
    },
    error,
    options
  );
};

// Общий метод с помощью которого всё срабатывает
const postImmediate = () => {
  getContinuousPosition();

  // Http запрос
  store.postImmediateTask(user.value!.phone, user.value!.fullname, currDate, continousCoordinates.value!);
};

// Если изменяются координаты, то отправляет http запрос
watch(continousCoordinates, (newValue) => {
  if (newValue) {
    store.patchImmediateTask(user.value!.fullname, newValue);
  }
});

// Прекращение наблюдения при размонтировании
onUnmounted(() => {
  if (watchId) {
    navigator.geolocation.clearWatch(watchId); // Используем сохраненный идентификатор
  }
});
```

В этом коде:

1. Мы объявляем переменную `watchId` вне функции `getContinuousPosition`, чтобы она была доступна во всей области видимости.
2. В функции `getContinuousPosition`, мы назначаем идентификатор, возвращаемый `watchPosition`, переменной `watchId`.
3. В `onUnmounted`, мы проверяем, существует ли `watchId`, и если да, то вызываем `navigator.geolocation.clearWatch(watchId)`, чтобы остановить отслеживание местоположения.

Таким образом, остается возможность корректно отключить наблюдение за местоположением при размонтировании компонента.

Answer 2

Вынеси id из функции 
 let id;
const getContinuousPosition = () => {
  id = navigator.geolocation.watchPosition((position) => {
    const { latitude, longitude } = position.coords;

    continousCoordinates.value = [
      longitude,
      latitude
    ]
  }, error, options);
};

...

onUnmounted(() => {
  if(id){
    navigator.geolocation.clearWatch(id);
  }
})