Vue AMap是一个基于Vue.js和高德地图API封装的组件库,用于在Vue项目中方便地使用高德地图的各种功能。
安装npm包
首先,你需要使用npm或yarn安装 vue-amap。
npm install vue-amap --save
安装完成后,在main.js中导入和使用Vue AMap:
import Vue from 'vue'
import VueAMap from 'vue-amap'
Vue.use(VueAMap)
初始化 VueAMap
首先,你需要去高德开放平台(https://lbs.amap.com/)注册一个账户,然后创建一个新的应用。 创建应用过程中,你需要填写应用名、应用类型、网址等信息。
创建完成后,系统会自动生成该应用的 API key。
将此 API key 配置到 vue-amap 中。 在初始化 VueAMap 插件的时候,通过 initAMapApiLoader 方法配置你的 API key,以下是一个示例:
import Vue from 'vue'
import VueAMap from 'vue-amap'Vue.use(VueAMap)
VueAMap.initAMapApiLoader({key: '高德API Key', // 刚才获取的高德API Keyplugin: [],
})
以上示例在配置 key 的同时,也加载了一些需要的插件。如果你在应用中不需要这些插件, 可以将其从 plugin 数组中删除。
官网文档
https://elemefe.github.io/vue-amap/#/zh-cn/introduction/init