在angular项目中异步加载高德地图api

为啥采用异步加载高德地图

由于高德地图只是存在部分页面中，需要调用其api,不需要整个项目中都调用，用时即调，这保证项目资源加载的速度，官方描述加载高德api的方式有很多种，所以本文使用异步加载的方式

需要注册申请高德api账号

高德api官网
看看官方文档

image.png

image.png

需要使命认证，认证一下就好了，添加后会自动生成一个key,把这个key复制到项目中

image.png

后面是自定义的回调函数名，这里取什么名，项目中调用时就用这个名调用

页面中添加地图容器

<div
   id="map"
   style="width: 100vw;height: 100vh;"
>

</div>

异步加载地图api

 ngOnInit(): void {
    this.loadMap();
  }

  private loadMap(): void {
    (window as any).mapInit = () => {
      var map = new AMap.Map('map');
    }
    var url = ConfigConst.mapApi;
    var jsapi = document.createElement('script');
    jsapi.charset = 'utf-8';
    jsapi.src = url;
    document.head.appendChild(jsapi);
  }

以上是异步加载的核心代码，这里看着就很明显了，其实是相当于要用到地图时，创建一个script标签，新增到dom中，去加载地址为url的资源，就高德地图的资源

image.png

画红线部分就是我门申请的高德地图的地址，调用mapInit回调函数，从而获取相应信息，
代码看到这里发现有报错

image.png

因为是通过script异步加载url资源，所以在开发环境上并不存在Amap这个类，就过不了ts的检测
此时需要定义一下

image.png

这里有个declare，是定义参数的意思，编译后会自动去掉，只存在开发环境，告诉检测，标志上下文中有这个变量，而不能直接在文中定义Amap这个变量，只是让编译器跳过这个报错检测，
运行程序如下图显示说明已成功加载高德地图api

image.png