1.异步加载高德地图以及初始化地图类--InitMap 插件git地址为 https://github.com/spi

场景：

因为我们要利用高德地图进行业务开发，我并不喜欢vue-amap或者通过npm去安装高德地图的js-api，因为可能这个项目需要在一些不是工程化的项目上运行，所以我用的是利用Promise实现异步加载高德地图

实现思路：(高手请略过文字)

首先创建一个InitMap的类并且将高德地图需要的参数 key el(需要挂载的元素参数,这里我没加校验)进行赋值操作，当然也可以不赋值(哈哈哈，全看个人习惯)，然后我这里封装了两个Promise一个是高德地图必须的webapi.amap.com/maps一个是高德地图动画以及轨迹纠偏轨迹画线的UI库webapi.amap.com/ui/1.0/main.js并且在等待两个js文件onload加载完成后进行高德地图初始化操作(这里我定位的默认是故宫)，并且在地图加载完成之后的complete回调之后执行resolve至此高德地图初始化封装完毕，代码如下：

```
/** * 初始化地图类 */export default class InitMap {    constructor(props) {        const key = 'your key';        this.el = props.el;        this.MapUrlArray = [            `https://webapi.amap.com/maps?v=1.4.15&callback=initAMap&key=${key}&plugin=AMap.TruckDriving,AMap.Scale,AMap.GraspRoad,AMap.LngLat,AMap.Driving,AMap.Geocoder`,            'https://webapi.amap.com/ui/1.0/main.js'        ];    }    createScriptAmp (url) {        return new Promise((res, rej) => {            window.initAMap = () => {                res(window.AMap);            }            const script = document.createElement('script');            script.type = 'text/javascript';            script.src = url;            script.async = true;            script.onerror = rej;            document.head.appendChild(script);        })    }    createScriptAMapUI (url) {        return new Promise((res, rej) => {            let script = document.createElement('script');            script.type = 'text/javascript';            script.src = url;            script.async = true;            script.onerror = rej;            document.head.appendChild(script);            script.onload = () => {                res();            }        })    }    //load MapUI + Map    async MapUILoader () {        try {            let AMap_ = await this.createScriptAmp(this.MapUrlArray[0]);            await this.createScriptAMapUI(this.MapUrlArray[1]);            return new Promise((res, rej) => {                res(AMap_);            })        } catch (err) {            console.log(err);        }    }    _initMap () {        return new Promise((resolve, reject) => {            this.MapUILoader().then(AMap => {                let map = new AMap.Map(this.el, {                    autoRotation: true,                    resizeEnable: true,                    center: [116.397428, 39.90923],//设置地图中心点坐标 默认定位到皇宫                    zoom: 14,                });                //地图绘制成功                map.on('complete', () => {                    resolve(map);                })            }, e => {                reject(e);            }).catch(e => {                reject(e);            })        })    }}
```

使用方法以vue2.5写法举例(TrackFactory为工厂构造类后边会有讲解，但大体思路如下):

//初始化地图        initMap () {            return new Promise((resolve, reject) => {                this.trackMap = new TrackFactory({                    el: 'container',                    key: 'your key',                    carPoto,                    isReDress: true,                    initCreated: (map) => {                        this.map = map;                        resolve();                    },                    initError: (err) => {                        reject(err);                    },                });            })        }

this.$nextTick(async () => {            await this.initMap().catch(err => {                this.handleCommonTrip('error', err);            });                   });

图片如下：