uniapp vue3 微信小程序 新建地址 打开地图选择地址

在UniApp (基于Vue3) 开发微信小程序时，想要实现新建地址并打开地图进行位置选择，你可以使用uni-app提供的`wx.chooseLocation` API。这是一个用于获取用户地理位置的原生微信接口。以下是简单的步骤：

1. 首先，在你的Vue组件中导入必要的依赖，如`@vant/map`或`geolocation`等地图库（如果未安装，可以使用uni-app的内置Map组件）：

<template>
  <van-map :center="mapCenter" :zoom="mapZoom">
    <!-- ... 其他地图元素 -->
    <van-marker v-if="selectedAddress" :position="selectedAddress.coordinate" />
  </van-map>
</template>

<script setup>
import { ref } from 'vue';
import { map, marker } from '@vant/map';

const mapCenter = ref([116.404, 39.915]); // 北京坐标作为初始中心点
const mapZoom = ref(15);
const selectedAddress = ref(null); // 存储选中的地址信息

// ...
</script>

2. 创建一个按钮或者其他触发事件，当点击时调用`chooseLocation`函数：

<button @click="getLocation">获取位置</button>

methods: {
  getLocation() {
    wx.chooseLocation({
      type: 'gcj02', // 使用高德坐标系
      success(res) {
        const { latitude, longitude } = res.addressComponent;
        selectedAddress.value = { coordinate: [longitude, latitude], address: res.address };
        // 更新地图中心点和标记位置
        mapCenter.value = [longitude, latitude];
      },
      fail(err) {
        console.error('获取位置失败:', err);
      }
    });
  }
}

3. 当用户选择新的地址后，你需要在`success`回调中更新`selectedAddress`变量，并相应地更新UI显示。