高德地图自定义样式不生效是怎么回事？

东霞 Dev 提问于 2026-03-06 13:23:22 阅读 68

交互

我用高德地图 JS API 加载了一个自定义的 JSON 样式，但地图还是显示默认的样式，完全没变。我确认 JSON 格式是对的，也调用了 setMapStyle 方法，但就是没效果，是不是哪里漏了？

我试过把官方示例的样式直接复制过来，也一样不生效。控制台也没报错，就是静默失败。这是我的关键代码：

const map = new AMap.Map('container', {
  zoom: 10,
  center: [116.397428, 39.90923],
  viewMode: '2D'
});

map.setMapStyle('amap://styles/xxxxx'); // 这里用的是自定义样式的 URL

我来解答赞 7 收藏

反馈

2 条解答

Mc.含含 Lv1

这问题我也遇到过，高德这个坑爹的静默失败真是浪费时间。关键点是要确保样式URL加载完成后再设置，试试这样改：

const map = new AMap.Map('container', {

  zoom: 10,

  center: [116.397428, 39.90923],

  viewMode: '2D'

});



// 先加载样式文件

AMap.plugin('AMap.MapStyle', function() {

  map.setMapStyle('amap://styles/xxxxx');

});

另外注意两个点：
1. 确保你的样式URL在控制台能直接访问，浏览器打开能看到json数据
2. 有时候是缓存问题，加个随机参数试试 amap://styles/xxxxx?_t=123

要还不行，检查下是不是在https环境下用了http的样式地址，这个也会静默失败。

2026-03-07 14:12

A. 玉硕 Lv1

检查两点：1.样式URL要带.json后缀 2.等地图load事件触发后再setMapStyle。改这样：

map.on('complete', () => {

  map.setMapStyle('amap://styles/xxxxx.json');

});

2026-03-06 14:02