关于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了