高德地图自定义样式不生效 解决方案（web前端）

最近在使用高德地图自定义样式的时候，发现一个奇怪的问题：使用官网的样式可以生效，但使用自定义样式就死活不生效，如下所示

 自定义地图 样式ID：

 使用样式：

 

解决方案：如果后面接的是 样式id，必须加上安全密钥，就可以生效了。

 key和安全密钥：

 代码如下（React）：

const ref = useRef<HTMLDivElement>(null);
const [map, setMap] = useState<any>();

useMount(() => {
    // 本地配置 安全密钥（写在别处也行，确保这行代码 比 AMapLoader.load 先执行即可）
    window._AMapSecurityConfig = { securityJsCode: '安全密钥' };
    // 加载地图
    AMapLoader.load({
      key: 'key', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap) => {
      if (ref.current) {
        setMap(
          new AMap.Map(ref.current, {
            resizeEnable: true,
            mapStyle: 'amap://styles/自定义样式id',//自定义样式id
            viewMode: '3D', // 是否为3D地图模式
            zoom: 12, // 初始化地图级别
            center: [114.06667, 22.61667], // 深圳市中心点位置
          }),
        );
      }
    });
  });

不过这种本地配置的方式（即安全密钥写在前端代码里）不安全，官网并不推荐。官网更推荐把安全密钥配置到服务器上，让服务器代理转发请求。如下图