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

最近在使用高德地图自定义样式的时候，发现一个奇怪的问题：使用官网的样式可以生效，但使用自定义样式就死活不生效，如下所示自定义地图样式ID：使用样式：解决方案：如果后面接的是样式id，必须加上安全密钥，就可以生效了。key和安全密钥：代码如下：const ref = useRef<HTMLDivElement>(null);const [map, setMap] = useState

爱上你...家菜包

9773人浏览 · 2022-01-11 11:14:58

爱上你...家菜包 · 2022-01-11 11:14:58 发布

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

自定义地图样式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'], // 指定插件列表，如比例尺'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], // 深圳市中心点位置
          }),
        );
      }
    });
  });

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