通常使用百度地图是这样的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script
type="text/javascript"
src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"
></script>
</head>
<body></body>
</html>
|
但是遇到需要动态设置 ak 的情况，比如在线上环境和开发环境，需要使用不同的 ak，那么就需要使用动态加载的方式。
已知 document.write()方法可以同步动态加载 js 文件，那么我们可以将 ak 写在 js 文件中，然后在 html 中调用即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="text/javascript" src="index.js"></script>
</head>
<body></body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
|
(function () {
let ak = "您的密钥";
ak = "我的密钥";
document.write(`
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=${ak}"></script>
`);
})();
|
