- 引入高德地图一般最常使用同步方式，直接放在index.html中的head中引入js文件。
<!--引入高德地图JSAPI -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<!--引入UI组件库（1.0版本） -->
<script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
这种引入方式叫同步加载，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把<script>标签放在<body>结尾处，这样尽可能减少页面阻塞。
2.异步引入方式
1.动态创建script标签
<!--异步加载 高德地图JSAPI ，注意 callback 参数-->
window.init= function(){
var map = new AMap.Map('container');
}
let script = document.createElement("script");
script.type = "text/javascript";
script.src = "//webapi.amap.com/maps?v=1.4.15&key="+key+"&callback=init";
script.onerror = reject;
document.head.appendChild(script);
高德地图最新的引入方式 ，2020年03月31日，地图 JS API v2.0 发布，欢迎使用
这里是官网介绍的加载方式，建议使用
https://lbs.amap.com/api/jsapi-v2/guide/abc/load
下面我们来讲再此之前经常使用的引入方式
单独创建一个js文件
比如在应用util文件夹下创建个文件名为 loadMap.js
/**
* 异步加载高德地图
*
* @export
* @param {*} key 高德地图key
* @param {*} plugins 高德地图插件
* @param {string} [v='2.0'] 高德地图版本
* @returns
*/
const v = "1.4.15";
const key = "";
const plugins = [
"ElasticMarker",
"AMap.MouseTool",
"AMap.PolyEditor",
"AMap.MarkerClusterer",
"AMap.RangingTool",
"AMap.DistrictSearch",
"AMap.OverView",
"AMap.DistrictLayer",
"AMap.CustomLayer"
];
export default function mapLoader() {
if (window.AMap) { // 已经加载成功，不重复加载
return new Promise((resolve) => {
resolve(window.AMap)
})
}
const loadMap = new Promise(function(resolve, reject) {
window.init = function() {
resolve(AMap)
};
let script = document.createElement("script");
script.type = "text/javascript";
script.async = true;
script.src = `//webapi.amap.com/maps?v=${v}&key=${key}&plugin=${plugins}&callback=init`;
script.onerror = reject;
document.head.appendChild(script);
});
const loadMapUI = new Promise(function(resolve, reject) {
let script2 = document.createElement("script");
script2.type = "text/javascript";
script2.async = true;
script2.src = "//webapi.amap.com/ui/1.0/main-async.js";
script2.onerror = reject;
script2.onload = function() {
//onload必须写在最后
resolve('success')
};
document.head.appendChild(script2);
});
return Promise.all([loadMap, loadMapUI])
.then(function(result) {
return result[0]
}).catch(e => {
console.log(e);
})
};
然后在需要的文件中引入此方法
import mapLoader from "@/utils/loadMap";
async creatMap() {
await mapLoader()
.then(async AMap => {
console.log("MP加载。。then。。。", AMap);
if (!window.AMapUI) {
// 如果还没有初始化
await initAMapUI(); // 这里调用initAMapUI初始化
}
await this.initPage(); //加载地图
})
.catch(err => {
this.$message({
message: "地图加载失败，" + err,
type: "error",
duration: 3000
});
console.log("MP加载。。err。。。", err);
});
},
先到这里，回见。
网友评论