這次項目需要用到地圖API，我們來學習一下在Vue中調用高德地圖的API

介紹

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

• 首先在http://lbs.amap.com/ 注冊高德開發(fā)者賬號
  

  注冊
  
  
  注冊成功

• 選擇申請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',//剛剛開發(fā)者申請哪里的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'
}