vue接入高德地图点击获取经纬度及省市区

最新推荐文章于 2025-03-21 09:32:30 发布

码农Movinbricks

最新推荐文章于 2025-03-21 09:32:30 发布

阅读量8.6k

点赞数 4

分类专栏： vue 文章标签： vue接入高德地图点击获取经纬度及省市区

本文链接：https://blog.csdn.net/w1316022737/article/details/99439135

版权

本文介绍了如何在Vue项目中集成高德地图，通过实例展示在main.js中引入vue-amap，并申请高德地图API key。在index.vue组件中设置数据并展示地图，实现点击地图后自动更新输入框中的经纬度和省市区信息。同时提供了高德错误码说明和官网链接供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装vue-amap

npm install --save vue-amap

在main.js中引入如下

// 引入地图
import aMap from 'vue-amap'

Vue.use(aMap)

aMap.initAMapApiLoader({
  key: '高德地图中申请的key',
  plugin: ['AMap.Geolocation', 'AMap.Geocoder']
})

在高德地图开发者中申请（https://lbs.amap.com/dev/key/app#）
3. index.vue中

          <el-row>
          <el-col :span="6">
            <el-form-item>
              详细地址：
              <el-input
                v-model="address"
                name="address"/>
            </el-form-item>
          </el-col>
        </el-row>
         
          <el-row>
          <el-col :span="4">
            <el-form-item>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              经度：
              <el-input
                v-model="lat"
                name="lat"
                type="number"/>
            </el-form-item>