vue中使用高德地图 amap--基础使用方法

最新推荐文章于 2024-12-06 15:51:10 发布

上头upup

最新推荐文章于 2024-12-06 15:51:10 发布

阅读量4.2k

点赞数 3

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_45802159/article/details/105029795

版权

本文介绍了如何在Vue项目中使用vue-amap插件集成高德地图，包括官网资源引用、插件安装及在main.js中的配置，以及Amap.vue组件的基础使用方法。

摘要由CSDN通过智能技术生成

vue-amap 官网：https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install
高德地图开放平台: https://lbs.amap.com/dev/key/app

安装

npm install vue-amap --save

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'],   //插件
    v:"1.4.4",  //版本号，默认高德sdk版本为1.4.4，可自行修改
    uiVersion: '1.0.11' // 版本号
})