Control for useGeolocation()

[lugrinder]

Clear and concise description of the problem

Once used useGeolocation(), it is not possible to stop (and continue) the geolocation update. The only way is unmounting the component that uses it.
There are scenarios where you need to temporally pause the position update, or simply capture the current position by taking multiple positions until accuracy is as desired.

Suggested solution

Add pause() and resume() functions to control the watcher.

Alternative

Export watcher and leave user to control it.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[lugrinder]

This could be a solution:

/* this implementation is original ported from https://github.com/logaretm/vue-use-web by Abdelrahman Awad */

import type { Ref } from 'vue-demi'
import { ref } from 'vue-demi'
import { tryOnScopeDispose } from '@vueuse/shared'
import { ConfigurableNavigator, defaultNavigator, useSupported } from '@vueuse/core'

export interface UseGeolocationOptions extends Partial<PositionOptions>, ConfigurableNavigator {
  immediate?: boolean
}

/**
 * Reactive Geolocation API.
 *
 * @see https://vueuse.org/useGeolocation
 * @param options
 */
export function useGeolocation(options: UseGeolocationOptions = {}) {
  const {
    enableHighAccuracy = true,
    maximumAge = 30000,
    timeout = 27000,
    navigator = defaultNavigator,
    immediate = true
  } = options

  const isSupported = useSupported(() => navigator && 'geolocation' in navigator)

  const locatedAt: Ref<number | null> = ref(null)
  const error = ref<GeolocationPositionError | null>(null)
  const coords: Ref<GeolocationPosition['coords']> = ref({
    accuracy: 0,
    latitude: Infinity,
    longitude: Infinity,
    altitude: null,
    altitudeAccuracy: null,
    heading: null,
    speed: null,
  })

  function updatePosition(position: GeolocationPosition) {
    locatedAt.value = position.timestamp
    coords.value = position.coords
    error.value = null
  }

  let watcher: number

  function resume() {
    if (isSupported.value) {
      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      watcher = navigator!.geolocation.watchPosition (
        updatePosition,
        err => error.value = err,
        {
          enableHighAccuracy,
          maximumAge,
          timeout
        }
      )
    }
  }

  function pause() {
    if (watcher && navigator) {
      navigator.geolocation.clearWatch (watcher)
      watcher = 0
    }
  }

  tryOnScopeDispose(() => {
    pause()
  })

  if (immediate)
    resume()

  return {
    isSupported,
    coords,
    locatedAt,
    error,
    pause,
    resume
  }
}

export type UseGeolocationReturn = ReturnType<typeof useGeolocation>