这次项目需要用到地图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中调用

<template>
    <div id="near">
      <div id="amap-main">

      </div>
    </div>
</template>
<script type="text/ecmascript-6">
  import { lazyAMapApiLoaderInstance } from 'vue-amap';
  export default{
    name:'near',
    mounted() {
      lazyAMapApiLoaderInstance.load().then(() => {
        this.map = new AMap.Map('amap-main', {center: new AMap.LngLat(121.59996, 31.197646)});
      });
    }
  }
</script>
<style lang="stylus">
  #near
    #amap-main
      height 300px
</style>

效果

结束

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