vue 获取当前地理位置

1、index.html中使用script标签引入 腾讯地图sdk

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=你的key"></script>

2、获取经纬度 转换为地理位置

<template>
  <div @click="positioning">
    点击获取位置
  </div>
</template>

<script setup>
  import { reactive} from 'vue'

  //当前位置经纬度
  const coordinate = reactive({
    latitude:'',
    longitude:'',
    address:''
  })

  //获取经纬度（开发环境下需要在浏览器中模拟地理位置）
  const positioning = () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        position => {
          coordinate.latitude = position.coords.latitude;
          coordinate.longitude = position.coords.longitude;
          coordinateTransformation()
        },
        error => {
          console.error("获取位置失败:", error);
        }
      );
    } else {
      console.error("该浏览器不支持地理位置获取。");
    }
  }
  //逆地址解析
  const coordinateTransformation = () => {
    var geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类

    var location = new TMap.LatLng(coordinate.latitude, coordinate.longitude);
    geocoder.getAddress({ location: location }) // 将给定的坐标位置转换为地址
    .then((result) => {
      // 显示搜索到的地址
      coordinate.address = result.result.address
    });
  }
</script>

Chrome 浏览器中打开 DevTools，然后点击右上角的三个点图标，选择 “More Tools” -> “Sensors”，在 Sensors 面板中可以模拟地理位置