vue项目中如何调用高德地图

前两天在vue项目中需要使用地图,以前没有接触过,经过一番折腾,终于搞了出来。 

一、发现vue-amap

刚开始自己想着是直接调用搞得地图的api,发现实现起来有点困难。经过一番谷歌、百度之后,发现 vue-amap 插件,优点是文档详细,易于上手。

二、使用vue-amap

1 准备

 在使用这个插件之前,首先需要申请高德地图的key。这个到官网就可以申请。申请过程就不叙述了。

2 安装vue-amap

 npm包安装:npm install -s vue-amap

CDN安装:引入组件

3 引入vue-amap(这里以npm安装方式为例)

引入VueAmap,在全局注册vueAMap

4 使用vue-amap


5 效果图

三、总结

这里只是初级的应用,里边还有定位、查询周边建筑等等功能。大家可以取文档拿来直接使用。

你可能感兴趣的:(vue项目中如何调用高德地图)