1、在html头部放你创建的高德安全密钥：
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "高德安全密钥",
}
</script>
2、完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<script type="text/javascript">
// 一定要安全密钥先写在前，key在后，不然无效
window._AMapSecurityConfig = {
securityJsCode: "高德安全密钥",
}
</script>
<script src="http://webapi.amap.com/maps?v=1.4.6&key=你申请的key"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<title>标题</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
3、高德地图key设置：
高德地图key申请地址：https://console.amap.com/dev/key/app
4、引用官方说明：
添加成功后，可获取到key值和安全密钥jscode（自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用)
注意：此次升级不会影响之前已获得 key 的使用；升级之后的新增的key必须要配备安全密钥一起使用，具体用法请您参看下文《JSAPI key和安全密钥设置和使用》（本次key升级新增安全密钥，是为了提升广大用户的对自己的key安全有效管理，降低明文传输被窃取的风险 。）