高德地图使用中报错INVALID_USER_SCODE

最新推荐文章于 2024-04-25 15:53:04 发布

码农666

最新推荐文章于 2024-04-25 15:53:04 发布

阅读量1.4k

点赞数 2

分类专栏： nginx 文章标签： nginx javascript 前端高德地图

本文链接：https://blog.csdn.net/qq_38941455/article/details/136339137

版权

nginx 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

之前高德地图使用办法如下

<script
    src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=Map3D,AMap.Scale,AMap.Geolocation,AMap.Autocomplete,AMap.PlaceSearch,AMap.PolyEditor,AMap.CircleEditor,AMap.Geocoder,AMap.AdvancedInfoWindow,AMap.DistrictSearch"></script>
  <script src="https://webapi.amap.com/loca?v=1.3.2&key=您申请的key值"></script>

现在直接这样使用会报INVALID_USER_SCODE这个错误
其实这在官网里提到了
添加成功后，可获取到key值和安全密钥jscode（自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用)

注意：此次升级不会影响之前已获得 key 的使用；升级之后的新增的key必须要配备安全密钥一起使用，具体用法请您参看下文《JSAPI key和安全密钥设置和使用》（本次key升级新增安全密钥，是为了提升广大用户的对自己的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=1.4.15&key=您申请的key值"></script>

2）代理服务器的设置

以 Nginx 反向代理为例，参考以下三个location配置，进行反向代理设置，分别对应自定义地图、海外地图、Web服务，其中自定义地图和海外地图如果没有使用到相关功能也可以不设置。需要将以下配置中的“您的安全密钥”六个字替换为您刚刚获取的jscode安全密钥。如果您使用了多个key，需要在代理设置中根据 key来映射不同的安全密钥。

server {
listen 80; #nginx端口设置，可按实际端口修改
server_name 127.0.0.1; #nginx server_name 对应进行配置，可按实际添加或修改

    # 自定义地图服务代理
    location /_AMapService/v4/map/styles {
        set $args "$args&jscode=您的安全密钥";
        proxy_pass https://webapi.amap.com/v4/map/styles;
    }
    # 海外地图服务代理
    location /_AMapService/v3/vectormap {
        set $args "$args&jscode=您的安全密钥";
        proxy_pass https://fmap01.amap.com/v3/vectormap;
    }
    # Web服务API 代理
    location /_AMapService/ {
        set $args "$args&jscode=您的安全密钥";
        proxy_pass https://restapi.amap.com/;
    }

}
方式二【不建议】：

JSAPI key搭配静态安全密钥以明文设置（不安全，建议开发环境用）：

引入地图 JSAPI 脚本之前增加设置 JSAPI 安全密钥的脚本标签，并将您的安全密钥「您申请的安全密钥」替换为您的安全密钥；（注意这个设置必须是在 JSAPI 的脚本加载之前进行设置，否则设置无效。）


<script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'您申请的安全密钥',
        }
</script>
<script
    src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=Map3D,AMap.Scale,AMap.Geolocation,AMap.Autocomplete,AMap.PlaceSearch,AMap.PolyEditor,AMap.CircleEditor,AMap.Geocoder,AMap.AdvancedInfoWindow,AMap.DistrictSearch"></script>
  <script src="https://webapi.amap.com/loca?v=1.3.2&key=您申请的key值"></script>