Vue使用高德地图

这次项目需要用到地图API，我们来学习一下在Vue中调用高德地图的API

介绍

• Vue-amap-基于Vue2.0的高德地图的地图组件,主页https://elemefe.github.io/vue-amap/#/

• 首先在http://lbs.amap.com/ 注册高德开发者账号
  

  

  注册
  
  
  

  注册成功

• 选择申请Key

• 新建应用，输入信息

• 新增Key

  
  
  
  
  
  

  填写随便填

---

在项目中使用

• 还是使用我们上一个项目，那个MintUI的，不是有一个附近的板块么，我们就用这个
• cd到项目目录
• 安装Vue-amap

# npm install vue-amap --save

安装成功

• 在main.js引入

import AMap from 'vue-amap';
Vue.use(AMap);
AMap.initAMapApiLoader({
    key: 'XXXXX',//刚刚开发者申请哪里的key
    plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType']
});

• 在Near.vue中调用

效果

结束

var author = {
  name:'丁波',
  GitHub:'dingbo1028',
  University:'BNUZ'
}