Vue使用高德地图

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

介绍

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

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

    Vue使用高德地图_第1张图片
    注册

    Vue使用高德地图_第2张图片
    注册成功

  • 选择申请Key

  • 新建应用,输入信息
  • 新增Key


    Vue使用高德地图_第3张图片

    Vue使用高德地图_第4张图片
    填写随便填

在项目中使用

  • 还是使用我们上一个项目,那个MintUI的,不是有一个附近的板块么,我们就用这个
  • cd到项目目录
  • 安装Vue-amap
# npm install vue-amap --save
Vue使用高德地图_第5张图片
安装成功
  • 在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中调用



Vue使用高德地图_第6张图片
效果

结束

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

你可能感兴趣的:(Vue使用高德地图)