解决方案：
在html头部那里放你的高德安全密钥：
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "你的高德安全密钥",
}
</script>
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
charset="utf-8">
<title>获取定位</title>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "你的高德安全密钥",
}
</script>
</head>
<body>
<div id='city'>
正在获取您当前的位置..
</div>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德key&plugin=AMap.CitySearch">
</script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
//获取用户所在城市信息
function showCityInfo() {
//实例化城市查询类
var citysearch = new AMap.CitySearch();
console.log(citysearch);
//自动获取用户IP，返回当前城市
citysearch.getLocalCity(function (status, result) {
console.log(result)
if (status === 'complete' && result.info === 'OK') {
console.log(result.city)
document.getElementById('city').innerHTML = result.province + " " + result
.city
//城市存到本地
localStorage.setItem('cityLocation', result.city);
}
});
}
showCityInfo();
}, false)
</script>
</body>
</html>
引用官方说明：
- 添加成功后，可获取到key值和安全密钥jscode（自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用)
注意：此次升级不会影响之前已获得 key 的使用；升级之后的新增的key必须要配备安全密钥一起使用，具体用法请您参看下文《JSAPI key和安全密钥设置和使用》（本次key升级新增安全密钥，是为了提升广大用户的对自己的key安全有效管理，降低明文传输被窃取的风险 。）
网友评论