new GaodeMap的style: "dark"不生效

[howcodes]

问题描述

在过去，我一直没有加入token测试的时候，dark模式一直是生效的，虽然控制台有警告信息您正在使用 Demo 测试 Token, 生产环境务必自行注册 Token 确保服务稳定 高德地图申请地址 https://lbs.amap.com/api/javascript-api/guide/abc/prepare Mapbox地图申请地址 https://docs.mapbox.com/help/glossary/access-token/!，但这并不妨碍dark模式的生效

const scene = new Scene({
        id: "map",
        map: new GaodeMap({
          style: "dark",
          center: [103, 30],
          pitch: 4,
          zoom: 10,
          rotation: 19,
        }),
      });

直到有一天，由于token一直没加，导致地图页面直接加载不出来，控制台提示<AMap JSAPI> KEY异常，错误信息：USER_KEY_RECYCLED，于是我去申请了新的token，然后加入token后发现dark模式失效了，不管怎样都不生效，想问问这是什么原因导致的

const scene = new Scene({
        id: "map",
        map: new GaodeMap({
          style: "dark",
          center: [103, 30],
          pitch: 4,
          zoom: 10,
          rotation: 19,
          token: "4b8d96b56bed29b2df4a7713e3e1421e",
        }),
      });

版本说明

使用的L7版本是

"@antv/l7": "^2.17.11",
"@antv/l7-maps": "^2.17.11",

使用的Vue版本是

"vue": "2.6.12",

重现步骤

<template>
  <div class="map_container" id="map"></div>
</template>
<script>
import { Scene, LineLayer } from "@antv/l7";
import { GaodeMap } from "@antv/l7-maps";

export default {
  data() {
    return {
      scene: null,
    };
  },
  created() {
    this.initMap();
  },
  methods: {
    initMap() {
      const scene = new Scene({
        id: "map",
        map: new GaodeMap({
          style: "dark",
          center: [103, 30],
          pitch: 4,
          zoom: 10,
          rotation: 19,
          token: "xxx", // 高德开发者控制台生请的token
        }),
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.map_container {
  height: 80vh;
  width: 100%;
}
</style>

最后补充

尝试了很久都没能把dark模式使用起来有点沮丧，但是我查看了官网给出vue的demo，地址是：https://codesandbox.io/s/infallible-ace-m3z9f4?file=/package.json:0-992，我居然发现里面的案例是dark模式修改后是生效的，于是我把其中的dependencies都修改成和它保持一致

"dependencies": {
    "@antv/l7": "latest",
    "@antv/l7-maps": "latest",
    "vue": "^2.5.22"
  },

结果还是无法生效

于是我整个项目都和它保持一致，很遗憾，还是无法复现dark模式！！！！！

[github-actions]

hi @howcodes, welcome!

[github-actions]

Hi @howcodes, Please star this repo if you find it useful! Thanks ⭐!
你好 @howcodes。如果该仓库对你有用，可以 star 一下，感谢你的 ⭐!

[lzxue]

新版的高德地图 API 需要设置key(token) 和密钥,出现说的问题大概率没设置密钥，设置密钥有三种方式：
https://lbs.amap.com/api/javascript-api-v2/guide/abc/jscode

[howcodes]

新版的高德地图 API 需要设置key(token) 和密钥,出现说的问题大概率没设置密钥，设置密钥有三种方式： https://lbs.amap.com/api/javascript-api-v2/guide/abc/jscode

感谢回复，就是这个问题导致的呢，但是L7官网似乎是没有对这块有说明是吗？

[wozien]

mark

[chenping412]

通过研究发现L7官方本身没有提供解决方案，我根据查看源码分析得出一个比较另类的解决方法，参考如下：
window._AMapSecurityConfig = {
securityJsCode: '高德官方key对应的安全密钥'
}
const _senc = new GaodeMap({
style: "light",
center: [114.20, 22.32],
zoom: 11,
token: "高德官方key",
});
const scene = new Scene({
id: 'map',
map: _senc,
logoVisible: false,
});

重点就是要通过在window下注入高德官方密钥，来实现主题数据请求成功
window._AMapSecurityConfig = {
securityJsCode: '高德官方key对应的安全密钥'
}
在官方依赖包里面也可以搜索出来这个配置，说明其实官方发现了问题，但是为什么在配置里面没有提供相关的入口，实在是想不通