【解决】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

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

但在使用的时候不生效。

        AMapLoader
            .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 的问题，还专门提工单给了高德，在高德的回复中看到了不同之处，就是最后少了这么一行：

 window._AMapSecurityConfig = {
     securityJsCode: '0c92ee89e23462625f3504c7dcc0f136'
 }

三、解决办法

正常应该是这样的：

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