为啥采用异步加载高德地图
由于高德地图只是存在部分页面中，需要调用其api,不需要整个项目中都调用，用时即调，这保证项目资源加载的速度，官方描述加载高德api的方式有很多种，所以本文使用异步加载的方式
需要注册申请高德api账号
高德api官网
看看官方文档
image.png
文中红线标识的就是需要我门注册账号的信息，以及回调函数，注册完登录后去“我的应用”管理配置自己的key,如下图
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
