前两天在vue项目中需要使用地图,以前没有接触过,经过一番折腾,终于搞了出来。
一、发现vue-amap
刚开始自己想着是直接调用搞得地图的api,发现实现起来有点困难。经过一番谷歌、百度之后,发现 vue-amap 插件,优点是文档详细,易于上手。
二、使用vue-amap
1 准备
在使用这个插件之前,首先需要申请高德地图的key。这个到官网就可以申请。申请过程就不叙述了。
2 安装vue-amap
npm包安装:npm install -s vue-amap
CDN安装:引入组件
3 引入vue-amap(这里以npm安装方式为例)
4 使用vue-amap
5 效果图
三、总结
这里只是初级的应用,里边还有定位、查询周边建筑等等功能。大家可以取文档拿来直接使用。