GitLab

高德地图能正常打开，但是搜索等功能不能正常使用，返回错误信息 INVALID_USER_SCODE

原因

高德地图自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用。

新申请的高德 key 需要运维同时提供安全秘钥一起使用。

解决方案

方案一（不推荐）

将秘钥挂载在 window 上 window._AMapSecurityConfig

src/common/enums/libs-map.ts

export const libsMap: { [key: string]: any } = {
  // js
  amap: 'https://webapi.amap.com/maps?v=2.0&key=你的key&callback=amapInit&plugin=AMap.CitySearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.Autocomplete,AMap.PlaceSearch,AMap.CircleEditor,AMap.PolyEditor,AMap.Geocoder,AMap.Geolocation,AMap.ToolBar,AMap.IndoorMap,AMap.DistrictSearch,AMap.Polygon', // 高德地图

};

// 高德地图自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用
// 高德地图秘钥，配合 amap 的 key 使用
export const amapSecurityJsCode = '你的秘钥';

src/common/utils/get-script.ts

function getAMapScript(libName) {
  //...

  // 高德地图自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用
  // 需要在加载之前设置（即在 script.onload 之前）
  window._AMapSecurityConfig = amapSecurityJsCode ? { securityJsCode: amapSecurityJsCode } : null;
  
  //...
}

方案二（推荐，更安全）

通过 nginx 配置代理 /opt/homebrew/etc/nginx/nginx.conf

server {
    listen       8080;
    server_name  localhost;

    # ...
    
    # 下面这段是关键

    # 高德地图 Web 服务 API 代理 安全密钥
    location /_AMapService/ {
        set $args "$args&jscode=你的秘钥";
        proxy_pass https://restapi.amap.com/;
    }
}

src/common/utils/get-script.ts

function getAMapScript(libName) {
  //...

  // 高德地图自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用
  // 需要在加载之前设置（即在 script.onload 之前）
  window._AMapSecurityConfig = amapSecurityJsCode ? { serviceHost: 'http://localhost:8080/_AMapService' } : null;
  
  //...
}

其中 serviceHost:'您的代理服务器域名或地址/_AMapService', 的 serviceHost 需要配合运维修改域名地址