關於VUE使用高德JsApi(二)——初始化地圖

第一步

創建一個初始化vue項目（vue cli創建教程）

第二步

執行命令行
npm i
npm i @amap/amap-jsapi-loader --save
引入amap包

第三步

創建mapLoader.js
  創建改js目的是為了第一次異步加載Amap后，在其他需要再次初始化時，不用再次去異步連接jsapi，可以直接調用已經加載好AMap的對象

    import AMapLoader from '@amap/amap-jsapi-loader';
    export default function MapLoader () { // <-- 原作者這里使用的是module.exports
    return new Promise((resolve, reject) => {
    if (window.AMap) {
    // console.log("已經加載過了");
    resolve(window.AMap)
    } else {
    console.log("加載高德地圖");
    AMapLoader.load({
    "key": "申請好的key值", // 申請好的Web端開發者Key，首次調用 load 時必填
    "version": "1.4.15", // 指定要加載的 JSAPI 的版本，缺省時默認為 1.4.15
    "plugins": ['AMap.moveAnimation','AMap.ToolBar','AMap.Marker','AMap.Driving','AMap.DistrictSearch','AMap.Autocomplete','AMap.PlaceSearch','AMap.MouseTool','AMap.Geocoder','AMap.Weather'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 需要什么就加載什么 不然會消耗性能
    "AMapUI": { // 是否加載 AMapUI，缺省不加載
    "version": '1.1', // AMapUI 缺省 1.1
    "plugins":['overlay/SimpleMarker'], // 需要加載的 AMapUI ui插件
    },
    // "Loca":{ // 是否加載 Loca， 缺省不加載
    // "version": '2.0' // Loca 版本，缺省 1.3.2 注：api版2.0不兼容Loca 2.0版本
    // },
    }).then((AMap)=>{
    resolve(AMap)
    }
    ).catch((e)=>{
    reject(e)
    }
    )
    }})
    }

推薦使用1.4版本2.0版本界面尚未優化 拖拽會有卡頓尤其是加了覆蓋點后（吃了大虧啊，直接2.0降1.4重構 -OVO-）

第三步

在App.Vue中使用

<template>
  <div id="app">
      <div id="container"></div><!--提供地圖容器-->
  </div>
</template>
<script>
import MapLoader from '../mapLoader';
  export default {
    name:'app',
    data() {
      return {
       map:null //存入amap對象 關於當前地圖的所有操作 都在該節點上
      }
    },
  created(){
     this.amapLoader();
  }
  ,
  methods: {
 amapLoader() {
      let _this=this
      MapLoader().then( (AMap) => {
           //加載高德地圖
        _this.initMap(AMap);
       },
        (e) => {
          console.log("地圖加載失敗", e);
        }
      );
    },
   initMap(AMap) {
      let _this=this
    this.map = new AMap.Map('container',{//按需填入參數
      zoom: 5,//縮放比例
    });
    },
}
}
</script>
<style  scope>
    #container{
      border: 1px red solid;
    width: 10vw;
    height:10vh;
    }
</style>

這樣我們就初始加載出了我們的第一個地圖界面了

基本上剩下的就是操作map了