為啥采用異步加載高德地圖
由于高德地圖只是存在部分頁面中，需要調(diào)用其api,不需要整個項目中都調(diào)用扒秸，用時即調(diào)播演，這保證項目資源加載的速度，官方描述加載高德api的方式有很多種伴奥，所以本文使用異步加載的方式
需要注冊申請高德api賬號
高德api官網(wǎng)
看看官方文檔
image.png
文中紅線標(biāo)識的就是需要我門注冊賬號的信息写烤，以及回調(diào)函數(shù)，注冊完登錄后去“我的應(yīng)用”管理配置自己的key,如下圖
image.png
需要使命認(rèn)證拾徙，認(rèn)證一下就好了顶霞，添加后會自動生成一個key,把這個key復(fù)制到項目中
image.png
后面是自定義的回調(diào)函數(shù)名，這里取什么名锣吼，項目中調(diào)用時就用這個名調(diào)用
頁面中添加地圖容器
<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);
}
以上是異步加載的核心代碼，這里看著就很明顯了蓝厌，其實是相當(dāng)于要用到地圖時玄叠，創(chuàng)建一個script標(biāo)簽，新增到dom中拓提，去加載地址為url的資源读恃，就高德地圖的資源
image.png
畫紅線部分就是我門申請的高德地圖的地址，調(diào)用mapInit回調(diào)函數(shù)，從而獲取相應(yīng)信息寺惫，
代碼看到這里發(fā)現(xiàn)有報錯
image.png
因為是通過script異步加載url資源疹吃，所以在開發(fā)環(huán)境上并不存在Amap這個類，就過不了ts的檢測
此時需要定義一下
image.png
這里有個declare西雀，是定義參數(shù)的意思萨驶，編譯后會自動去掉，只存在開發(fā)環(huán)境艇肴，告訴檢測腔呜，標(biāo)志上下文中有這個變量，而不能直接在文中定義Amap這個變量再悼，只是讓編譯器跳過這個報錯檢測核畴，
運行程序如下圖顯示說明已成功加載高德地圖api
image.png
