vue3 高德地图输入地点获取经纬度

Vue3中使用高德地图API获取用户输入地点的经纬度，通常需要以下几个步骤：

1. **安装依赖**：首先在项目中安装`vue-amap`库，这是一个方便集成高德地图的UI组件和插件，可以快速接入高德地图API。

   npm install vue-amap @vue-amap/core @vue-amap/geolocation

2. **引入并配置**：在Vue文件中引入组件，并在Vue的原型上注册AMap实例，以便后续使用。

   import { AMapLoader } from '@vue-amap/core'
   import Geolocation from '@vue-amap/geolocation'

   export default {
     setup() {
       return new Promise((resolve, reject) => {
         AMapLoader.init({
           key: 'your_amap_key', // 替换为你的高德地图API密钥
         }).then(() => {
           const map = new AMap.Map('container', {
             zoom: 15,
             center: [116.404, 39.915], // 北京坐标，作为初始位置
           })
           new Geolocation({
             enableHighAccuracy: true, // 提供更精确的位置信息，默认值为true
             timeout: 10000, // 超时时间，单位毫秒
             showButton: false, // 是否显示定位按钮，默认隐藏
           }).on('complete', function(position) {
             resolve({ lat: position.latitude, lng: position.longitude }) // 返回经纬度
           });
         });
       })
     }
   }

3. **创建元素**：在HTML模板中创建一个用于输入地点的input字段和显示经纬度的地方。

   <div id="app">
     <input v-model="searchText" placeholder="请输入地址...">
     <p>经度: {{ lat }}</p>
     <p>纬度: {{ lng }}</p>
   </div>

当用户在输入框中输入地址后，你可以通过监听v-model变化来触发地图的地点查找，并获取经纬度。