解决Vue 高德地图自定义地图样式，无法显示无法生效的问题

Posted 2022-10-23

【解决】Vue 高德地图自定义地图样式，无法显示、无法生效的问题

一、问题描述

项目中用到了自定义地图，我是用的 Vue JSAPI Loader 加载的 API

自定义地图样式的地址： ​​https://geohub.amap.com/mapstyle/index​​​ JSAPI Loader 加载 JS API 的方式官方说明：​​https://lbs.amap.com/api/jsapi-v2/guide/abc/load​​

我定义的地图样式是这样的：

但在使用的时候不生效。

.load(
                key: mapConfig.appId, // 开发应用的 ID
                version: "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: [
                    AMap.ToolBar, // 缩放按钮
                    AMap.Scale, // 比例尺
                    AMap.DistrictLayer, // 定位
                ],
            )
            .then(map => 
                AMap = map
                this.map = new AMap.Map(container, 
                    // mapStyle: amap://styles/grey, //设置地图的显示样式
                    // mapStyle: amap://styles/darkblue,
                    mapStyle: amap://styles/ab84514368ab39bd0e607b5a5430605c,
                    // mapStyle: amap://styles/blue,
                    // mapStyle: amap://styles/fresh,
                    // mapStyle: amap://styles/dark,
                    // mapStyle: amap://styles/whitesmoke,
                    // center: MY_POSITION,
                    zoom: 11, // 缩放级别
                )
                this.map.addControl(new AMap.ToolBar())
                this.map.addControl(new AMap.Scale())
              )
            .catch(e => 
                console.log(e)
            )

二、原因

是少了 ​​securityJsCode​​

我看到别人使用 script 的方式载入高德 API 都可以正常显示，以为是 Loader 的问题，还专门提工单给了高德，在高德的回复中看到了不同之处，就是最后少了这么一行：

._AMapSecurityConfig = 
     securityJsCode: 0c92ee89e23462625f3504c7dcc0f136
 

三、解决办法

正常应该是这样的：

新 API key 现在已经不像原来那个只有一个值了。