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

 自定义地图 样式ID：

 使用样式：

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

 key和安全密钥：

 代码如下（React）：

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

useMount(() => {
    // 配置安全密钥
    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], // 深圳市中心点位置
          }),
        );
      }
    });
  });

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

首先，我们在高德地图sdk中下载自定义地图，并在build.gradle中引用。将下载的.data文件放入assets文件夹下。关键来了，如何读取自定义地图。

private void setMapCustomStyleFile(Context context) {
    String styleName = "mystyle_sdk_1507863834_0100.data";
    FileOutputStream outputStream = null;
    InputStream inputStream = null;
    String filePath = null;
    try {
        inputStream = context.getAssets().open(styleName);
        byte[] b = new byte[inputStream.available()];
        inputStream.read(b);

        filePath = context.getFilesDir().getAbsolutePath();
        File file = new File(filePath + "/" + styleName);
        if (file.exists()) {
            file.delete();
        }
        file.createNewFile();
        outputStream = new FileOutputStream(file);
        outputStream.write(b);

    } catch (IOException e) {
        e.printStackTrace();
    } finally {
        try {
            if (inputStream != null)
                inputStream.close();

            if (outputStream != null)
                outputStream.close();

        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    aMap.setCustomMapStylePath(filePath + "/" + styleName);

    aMap.setMapCustomEnable(true);
    aMap.showMapText(true);

}

aMap = mMapView.getMap();这行代码之后即可。

.data文件位置如下

在高德地图开放平台官网的jsAPI中提供了自定义地图的方法：

1. 其中官方提供了10个主题来给开发者们使用
   
2. 但10个主题并不能满足所有场景，所以官方还提供了自定义地图样式的方法：

（1）进入自定义页面，点击创建地图样式：

（2）选择一个与目标样式相近的基础模版然后点击「创建」按钮：

（3）在左边导航栏里选择需要改变样式的模块，比如：陆地，并打开取色板选择想要的颜色来更换掉

（4）样式修改完成之后，点击左上角「退出」键，随即进入自定义地图界面：

（5）点击想要使用的样式中的「发布」按钮，发布成功之后，点击「使用与分享」按钮

（6）可以复制上图中的样式ID来使用，也可以点击分享地图样式给其他账号，在项目中具体使用代码如下：

这里在引入高德地图的时候必须要使用自定义样式所在的账号的key才可以！比如我在账号A下新建的地图样式，就需要使用A的key，不然不会生效

//引入高德地图
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=Map3D,AMap.DistrictLayer,AMap.Scale,AMap.ToolBar"></script>

//使用样式：在amap的配置项找到mapStyle，
mapStyle: "amap://styles/你的样式ID"，//这里样式ID，我这里就是fdb98ba86eaa2e61e2b4c054ebe4989d

到这里就结束了，搞定收工！