[toc]

记！

前言

所有的问题都是粗心粗心粗心！！！

问题

要搞web几个静态页面的地图集成，最后确定要使用高德地图去搞一搞。
简单过了过文档之后，直接奔demo去了。
通过调试，大部分功能都跑起来了，标记点啥的都没问题。
但是发现AMap除了初始化的属性，其它功能如getCity(),setCity()等功能全都无效。

一脸懵逼。

分析

而官网上的demo始终是可以使用的，除了key不同，但是仔细检查了创建的key也没有发现问题。

问题定位通过控制台抛出了调用异常。以 setCity 调用为例。
日志如下：

Uncaught TypeError: r is not a function
    at maps?v=2.0&key=c3abdd15e187225fa749976aceabc677:1:790594
    at maps?v=2.0&key=c3abdd15e187225fa749976aceabc677:1:777693
    at JSONP.window.<computed> (maps?v=2.0&key=c3abdd15e187225fa749976aceabc677:1:589342)
    at district?platform=JS&s=rsv3&logversion=2.0&key=c3abdd15e187225fa749976aceabc677&sdkversion=2.0.5.14&appname=http%253A%252F%252Flocalhost%253A63342%252F-8uqf1kzlxcbj628ynb2tgkpz08b80uyvpzzk9%252Fpc%252Ftemplate%252FnewWeb%252Famap_test.html&csid=6F28A7F3-46B6-4192-9B08-249B12140684&output=json&subdistrict=0&extensions=all&keywords=%E5%AE%81%E6%B3%A2%E5%B8%82&callback=jsonp_973386_1673598283685_:1:1

打开控制台 Network 发现请求错误如下：

jsonp_294799_1673600812423_({info: "INVALID_USER_SCODE", infocode: "10008", status: "0",…})
info :  "INVALID_USER_SCODE"
infocode :  "10008"
...

在高德官网检索相关错误全是说移动端集成的错误，比如签名啥的。
我这确确实实是在web端写的静态页。

实在没头绪。

但感觉应该是跟签名或者key相关的问题。

最后回到初始集成文档。仔细过了几遍之后，发现一个一直被我忽略的点。

4. 添加成功后，可获取到 key 值和安全密钥 jscode（自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用)
   注意：此次升级不会影响之前已获得 key 的使用；升级之后的新增的key必须要配备安全密钥一起使用，具体用法请您参看下文《JSAPI key和安全密钥设置和使用》（本次key升级新增安全密钥，是为了提升广大用户的对自己的key安全有效管理，降低明文传输被窃取的风险 。）

我申请完确实有这么个jscode安全密钥，但是从demo那边看，一直没有相关的内容，所以只是以为开发版本的时候，这个忽略也可以用而已。

问题修复

按照文档指引添加制定内容。

4. JSAPI key和安全密钥的使用
   方式一【强烈建议】：
   1）JSAPI key搭配代理服务器并携带安全密钥转发（安全）
   引入地图 JSAPI 脚本之前增加代理服务器设置脚本标签，设置代理服务器域名或地址，将下面示例代码中的「您的代理服务器域名或地址」替换为您的代理服务器域名或ip地址，其中_AMapService为代理请求固定前缀，不可省略或修改。（注意您这个设置 必须 是在 JSAPI 的脚本加载之前进行设置，否则设置无效。）

服务器代理配置版

<script type="text/javascript">
    window._AMapSecurityConfig = {
        serviceHost:'您的代理服务器域名或地址/_AMapService',  
        // 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',
    }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=你用的api版本号&key=你申请的key值"></script> 
<!-- 例如 -->
<!-- src="https://webapi.amap.com/maps?v=2.0&key=asdjflkajsdlkfajlskdjf" -->

方式二【不建议】：
JSAPI key搭配静态安全密钥以明文设置（不安全，建议开发环境用）：
引入地图 JSAPI 脚本之前增加设置 JSAPI 安全密钥的脚本标签，并将您的安全密钥「您申请的安全密钥」替换为您的安全密钥；（注意这个设置 必须 是在 JSAPI 的脚本加载之前进行设置，否则设置无效。）

方式二也是要添加设置的，我之前看的不仔细忽略了这块的内容。
记得改好对应的 版本号 和 key 值

<script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'您申请的安全密钥',
        }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=你的版本号&key=您申请的key值"></script> 
<!-- 例如 -->
<!-- src="https://webapi.amap.com/maps?v=2.0&key=asdjflkajsdlkfajlskdjf" -->

参考

高德地图集成准备文档 https://lbs.amap.com/api/javascript-api/guide/abc/prepare