Leaflet 1.7.0搭配Google Mutant地图图层突然无法显示求助

• 安装步骤1：
• 安装步骤2：

用Leaflet 1.7.0结合GoogleMutant加载谷歌底图已经用了好几年，最近突然看不到底图了，没有明显错误提示，完全加载不出来。已经确认谷歌云凭证是有效的（之前因为挂失换卡没付过费出现过类似问题，但这次排除这个情况），而且代码完全没改过，实在搞不懂哪里出问题了。

错误日志 #

map.js:37 Uncaught (in promise) TypeError: Spread syntax 
requires ...iterable[Symbol.iterator] to be a function
at qwa (map.js:37:176)
at Lxa.changed (map.js:107:360)
at al (js?key=AIzaSyDIn3Uui…Yg&ver=6.5.2:196:59)
at _.Zk.bindTo (js?key=AIzaSyDIn3Uui…g&ver=6.5.2:334:152)
at lya.Rxa [as PE] (map.js:71:23)
at js?key=AIzaSyDIn3Uui…Yg&ver=6.5.2:265:78
qwa @   map.js:37
changed @   map.js:107
al  @   js?key=AIzaSyDIn3Uui…R37Yg&ver=6.5.2:196
_.Zk.bindTo @   js?key=AIzaSyDIn3Uui…R37Yg&ver=6.5.2:334
Rxa @   map.js:71
(anonymous) @   js?key=AIzaSyDIn3Uui…R37Yg&ver=6.5.2:265
await in (anonymous)        
handleMouseUp_  @   unknown
Promise.then        
Zn  @   js?key=AIzaSyDIn3Uui…R37Yg&ver=6.5.2:264
_initMutant @   Leaflet.GoogleMutant.js?ver=6.5.2:173
(anonymous) @   Leaflet.GoogleMutant.js?ver=6.5.2:62
handleMouseUp_  @   unknown
Promise.then        
onAdd   @   Leaflet.GoogleMutant.js?ver=6.5.2:58
_layerAdd   @   Layer.js:114
whenReady   @   Map.js:1465
addLayer    @   Layer.js:176
addTo   @   Layer.js:52
(anonymous) @   post.php?post=3182&action=edit:11771
dispatch    @   load-scripts.php?c=0…e,utils&ver=6.5.2:2
v.handle    @   load-scripts.php?c=0…e,utils&ver=6.5.2:2
handleMouseUp_  @   unknown

相关代码 #

// Set up map layers
var roads = L.gridLayer.googleMutant({
    type: 'roadmap' // valid values are 'roadmap', 'satellite', 'terrain' and 'hybrid'
});

var satellite = L.gridLayer.googleMutant({
    type: 'satellite'   // valid values are 'roadmap', 'satellite', 'terrain' and 'hybrid'
});
var hybrid = L.gridLayer.googleMutant({
    type: 'hybrid'  // valid values are 'roadmap', 'satellite', 'terrain' and 'hybrid'
});

1. 升级GoogleMutant版本 #

Leaflet 1.7.0搭配的旧版GoogleMutant大概率没适配谷歌地图JS API的最新更新。谷歌地图API会不定期改内部逻辑，旧插件处理新返回的数据就会出现扩展运算符这类语法兼容问题。直接把Leaflet.GoogleMutant更到最新稳定版，就能解决大部分API适配问题。

2. 锁定谷歌地图JS API版本 #

默认加载的谷歌地图API是最新版，容易踩兼容坑。可以在加载API时指定一个稳定旧版本，比如：

<script src="https://maps.googleapis.com/maps/api/js?v=3.47&key=你的API密钥"></script>

选3.47及之前的版本，和Leaflet 1.7.0、旧版GoogleMutant的兼容性会更好，避免自动更到最新版出问题。

3. 二次核查凭证与权限 #

虽然你说凭证有效，但还是要确认这两点：

• 谷歌云控制台里，这个API密钥有没有开启Maps JavaScript API和Static Maps API（GoogleMutant必须依赖这两个服务）；
• 账户有没有未处理的计费提醒，哪怕凭证没问题，计费异常也会导致服务被限制。

4. 调试扩展运算符报错 #

报错指向map.js里的扩展运算符用错了，大概率是谷歌返回的数据结构变了，GoogleMutant没法正确处理。可以：

• 用浏览器开发者工具在qwa函数打个断点，看看被扩展的对象是不是可迭代类型（比如数组、Map）；
• 去GoogleMutant的GitHub仓库搜issue，看看有没有其他人遇到一样的问题，官方有没有修复方案。

内容的提问来源于stack exchange，提问作者Robert Ruby II