geolocation

介绍：

地理位置插件

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

Reference

Method

• getLocation

  获取当前位置

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

• createLocation

  创建获取当前位置的监听控制器

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(
    `经度：${coords.longitude} 纬度：${coords.latitude} 海拔：${coords.altitude}`
  );
});

Parameter

• $LocationOptions

  位置获取得到的结果

export interface $GeolocationPosition {
  /**当前状态 */
  state: $GeolocationPositionState;
  /**地理位置坐标包含经纬度 */
  coords: GeolocationCoordinates;
  /**时间戳 */
  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>