使用高德地图作为底图时，如何配置

[gaoshunpeng]

如下图：官网文档在配置高德地图作为底图时，只有对于token即高德地图key的配置，并没有密钥的配置，而高德地图官方要求必须加载密钥，否则很多功能没法使用

[lzxue]

按照高德方案来

[qq9321]

哪来的token 啊

[lzxue]

L7 的 token 对应高德的key

https://lbs.amap.com/api/javascript-api-v2/guide/abc/jscode

[lzxue]

哪来的token 啊
token - key

[qq9321]

那我配置里面字段名是写key 呢还是token 呢

[lzxue]

L7 里面写Token

[lzxue]

高德地图 �token 介绍：https://lbs.amap.com/api/javascript-api-v2/guide/abc/jscode

高德地图使用的问题参考：https://codesandbox.io/s/l7-gao-de-demo-3zgxqf?file=/index.js

[yeyunwen]

const scene = new L7.Scene({
id: 'map',
map: new L7.GaodeMap({
style: 'dark', // 样式URL
center: [120.19382669582967, 30.258134],
pitch: 0,
zoom: 12,
token: '高德地图token',
}),
});

@lzxue @qq9321 token的位置 写高德工作台里的key对吗，你们一下说token一下说key的，我还是不懂~

[lzxue]

https://codesandbox.io/s/l7-gao-de-demo-3zgxqf?file=/index.js
看上面的demo 代码示例。

L7 的token 对应的高德 key

高德 key 介绍： https://lbs.amap.com/api/javascript-api-v2/guide/abc/jscode

全局设置密钥

[wsqstar]

亲测好用，提供同样的解决方案

// app.js
import "./App.css";
import { useEffect} from "react";
import {Scene} from "@antv/l7"
import {GaodeMap} from "@antv/l7-maps"



function App() {
  useEffect(() => {
    const scene = new Scene({
      id: "map",
      map: new GaodeMap({
        style: "dark", // 样式URL
        center: [120.19382669582967, 30.258134],
        pitch: 0,
        zoom: 12,
        token: "就高德的key就行 没用安全密钥",
      }),
    });
  }, []); // 添加空的依赖数组以确保 useEffect 仅在组件挂载时运行
  return (
    <div id="map" style={{
      positon:"absolute",
      top:0,
      left:0,
      right:0,
      bottom:0
    }}>

    </div>
  );
}
export default App;

附带截图