前言

传统引用高德地图方式是在index.html中引入，即可全局调用AMap。在混合开发中，按传统方法前端H5页面引入高德地图发现个奇怪的现象，就是地图文件没有被缓存，跳转每个页面都会重新加载。所以想到按需引入地图。

解决方案

新建一个MapLoader.js文件

export default function MapLoader() {
  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve(window.AMap);
    } else {
      let script = document.createElement('script');
      script.type = 'text/javascript';
      script.async = true;
      // 注意callback
      script.src = 'https://webapi.amap.com/maps?v=1.4.10&key=你自己的key&callback=initAMap';
      script.onerror = reject;
      document.head.appendChild(script);
    }
    window.initAMap = () => {
      resolve(window.AMap);
    };
  });
}

组件中引用

import MapLoader from '@/assets/js/MapLoader.js';
let AMap = {};
// import AMap from 'AMap';

// 生命周期里
let that = this;
await MapLoader().then(_AMap => {
  AMap = _AMap;
  // that.mapInit(); 初始化地图
}, e => {
  console.log('加载失败', e);
});

总结

这样就做到了按需引用，不会在每个页面都加载该插件，这种方法基本可以引用任何第三方插件。