高德、百度第三方地图异步加载API

使用第三方地图时，官方文档介绍提供了2种引入方式：

        1、在html文件中直接script标签引入

        2、异步加载

但是在开发中会发现，其实需要使用到地图功能的实际工作场景仅仅是个别的几个页面，所以完全没有必要在index.html文件中全局引入地图资源，只需要在需要使用的页面引入即可。

一、高德地图(异步加载)

function LoadGDMapScript() {
		//设置安全密钥
		//根据官方文档提示在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用
		window._AMapSecurityConfig = {
			securityJsCode: "申请的安全密钥",
		};
		
		// 初始化地图
		return new Promise((resolve, reject) => {
			
			//异步加载回调函数
			window.initialize = function() {
				console.log('高德地图脚本初始化成功....');
				//可以在这边初始化创建地图实例，也可以在LoadGDMapScript的异步回调中初始化创建
				// ...
				resolve()
			}
			// 插入script脚本
			var jsapi = document.createElement("script");
			jsapi.charset = "utf-8";
			jsapi.src = "https://webapi.amap.com/maps?v=2.0&key=申请的key值&callback=initialize";
			document.head.appendChild(jsapi);
		})
 }

二、百度地图(异步加载)

function LoadBaiduMapScript() {
		return new Promise((resolve, reject) => {
			// 异步加载回调处理
			window.initCallback = function () {
				console.log("脚本初始化成功...");
                // 创建Map实例
				resolve();
			};
			// 插入script脚本
			let scriptNode = document.createElement("script");
			scriptNode.type = "text/javascript"
			scriptNode.src = "https://api.map.baidu.com/api?v=2.0&ak=申请的安全密钥&s=1&callback=initCallback";
			document.body.appendChild(scriptNode);
		});
 }

以上2中均是本人已在实际项目中应用。