vue项目使用高德地图定位当前地址

一羊迁徙

于 2020-07-08 20:33:10 发布

阅读量2.7k

点赞数 5

分类专栏：高德地图API的使用文章标签： vue 定位

本文链接：https://blog.youkuaiyun.com/weixin_43242112/article/details/107214148

版权

这篇博客介绍了如何在Vue项目中使用vue-amap插件进行地图定位。首先，通过安装命令添加vue-amap插件，并在main.js中引入。接着，展示了具体的页面代码实现。最后，详细说明了data数据的设置，以实现实时获取和显示当前地址。

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

一、在项目中安装vue-amap插件

1.最终效果
2.安装命令

npm install vue-amap --save

3.在main.js中引入

import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: 'dd4cc5f831b67cde767de9a65f983650',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.Geolocation'],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
})

plugin字段表示插件引入，可以根据自己需求引入，但是想做当前定位，必须引入'AMap.Geolocation'

二、页面代码

<!-- 地图容器 -->
   <div id="map_container">
  <!-- 地图 --

最低0.47元/天解锁文章