定位 useLocation

更新: 2025/1/6 字数: 0 字 时长: 0 分钟

基础使用

useLocation 包含了获取定位的方法。

获取一次定位

getLocation 函数用于请求一次手机当前的定位，返回json格式的数据，存在location里

import useLocation from "@/hooks/useLocation";
const { location, getLocation } = useLocation();

点击查看示例代码

<van-button class="!mt-10" type="primary" round block @click="getLocation">
  定位
</van-button>

获取实时定位

getRealtimeLocation 函数用于请求实时定位信息，传参second为回传周期，返回json格式的数据，存在location里

import useLocation from "@/hooks/useLocation";
const { location, getRealtimeLocation } = useLocation();

点击查看示例代码

<script setup lang="ts">
  import useLocation from "@/hooks/useLocation";
  const { second, location, getRealtimeLocation } = useLocation();

  const show = ref(false);
</script>

<template>
  <div class="p-16">
    <div>
      <van-field
        v-model="second"
        label="周期"
        label-width="80px"
        placeholder="请输入"
        clickable
        readonly
        @touchstart.stop="show = true" />
      <van-number-keyboard
        v-model="second"
        :show="show"
        :maxlength="6"
        @blur="show = false" />

      <div class="data-content bg-white dark:bg-[--van-background-2]">
        <van-field
          v-if="location"
          v-model="location"
          rows="1"
          autosize
          readonly
          type="textarea"
          placeholder="" />
        <VanEmpty
          v-else
          description="点击定位按钮，获取json类型数据包含经纬度、详细地址等" />
      </div>
      <van-button
        class="!mt-10"
        type="primary"
        round
        block
        @click="second && getRealtimeLocation(second)">
        定位
      </van-button>
    </div>
    <div>
      <van-button
        class="!mt-10"
        type="primary"
        round
        block
        @click="openBaiduMap">
        打开百度地图
      </van-button>
    </div>
  </div>
</template>

打开百度地图

openBaiduMap 函数用于调起百度地图

import useLocation from "@/hooks/useLocation";
const { openBaiduMap } = useLocation();

API

返回值、方法

返回值、方法	说明	类型
location	定位信息，返回类型数据包含经纬度、详细地址等	json
getLocation	请求一次定位	() => void
getRealtimeLocation	请求实时定位，second为回传周期，单位 s	(second: number | string) => void
openBaiduMap	调起百度地图	() => void