vue2.0及以上版本引高德地图，实现点坐标及多地址切换

最新推荐文章于 2024-04-25 17:22:17 发布

BigMax88

最新推荐文章于 2024-04-25 17:22:17 发布

阅读量2k

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_43360935/article/details/86622186

版权

本文介绍了如何在Vue3.0项目中使用vue-amap插件集成高德地图，包括安装vue-amap、配置key和引入插件，以及在组件中编写代码实现点坐标定位和多地址切换的功能。详细步骤包括在main.js中的初始化设置，组件内DOM结构的构建，以及必要的JS和CSS样式。最后展示了效果。

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

申明：本文为博主原创文章，未经博主允许不得转载。 https://blog.youkuaiyun.com/qq_43360935/article/details/86622186
我这个项目是基于vue3.0，引用vue-amap开发的。
有兴趣的猿友们可以去官网看API：https://elemefe.github.io/vue-amap/#/
1.安装:
npm install vue-amap --save
2.在main.js里引入：
import VueAMap from ‘vue-amap’;
然后使用（以下代码可以直接复制）
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: ‘去高德地图申请一个key,复制到这里’,
plugin: [‘AMap.Autocomplete’, ‘AMap.PlaceSearch’, ‘AMap.Scale’, ‘AMap.OverView’, ‘AMap.ToolBar’, ‘AMap.MapType’, ‘AMap.PolyEditor’, ‘AMap.CircleEditor’],
// 默认高德 sdk 版本为 1.4.4
v: ‘1.4.4’,
uiVersion: ‘1.0.11’ // 这个是引官方ui组件库的时候要用的你不引就不要写
});
3.在你要用到的页面组件里写以下代码(DOM结构)

 <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo" :style="{width:'690px',height:'490px'}">
     &

最低0.47元/天解锁文章