geolocation

intro:

Geolocation plugin

• geolocation
  • Reference
    • Method
      • Parameter
  • Usage Plugins
  • Usage WebComponent

Reference

Method

• getLocation

  Get current location

import { geolocationPlugin, $GeolocationPosition } from "@plaoc/plugins";
await geolocationPlugin.getLocation();

• createLocation

  Watch location

import type { $LocationOptions, $GeolocationController } from "@plaoc/plugins";
import { geolocationPlugin } from "@plaoc/plugins";
const options: $LocationOptions = {};
const controller: $GeolocationController =
  await geolocationPlugin.createLocation(options);
controller.listen((res) => {
  const coords = res.coords;
  console.log(
    `longitude：${coords.longitude} latitude：${coords.latitude} altitude：${coords.altitude}`
  );
});

Parameter

• $LocationOptions

  Results obtained by location acquisition

export interface $GeolocationPosition {
  /**Current status */
  state: $GeolocationPositionState;
  /**Geographical location coordinates include latitude and longitude */
  coords: GeolocationCoordinates;
  /**Time stamp */
  timestamp: number;
}
export interface $GeolocationPositionState {
  code: $GeolocationCode;
  message: string | null;
}
export enum $GeolocationCode {
  success = 0,
  permission_denied = 1,
  position_unavailable = 2,
  timeout = 3,
}

• GeolocationCoordinates

Usage Plugins

<script setup lang="ts">
import { geolocationPlugin } from "@plaoc/plugins";

async function getLocation() {
  const res = await geolocationPlugin.getLocation();
}
</script>

Usage WebComponent

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { HTMLGeolocationElement } from "@plaoc/plugins";

const $geolocationPlugin = ref<HTMLGeolocationElement>();
let geolocation: HTMLGeolocationElement;

onMounted(async () => {
  geolocation = $geolocationPlugin.value!;
});

async function getLocation() {
  const res = await geolocation.getLocation();
}
</script>
<template>
  <dweb-geolocation ref="$geolocationPlugin"></dweb-geolocation>
</template>