Google Maps JS脚本报错：Uncaught TypeError: addresses.forEach is not a function

嘿，我来帮你搞定这个报错！首先得明确，这个错误的核心原因很简单：你拿到的addresses不是一个数组，所以没法调用数组专属的forEach方法。结合你的代码和页面情况，我整理了具体原因和解决方案：

为什么会出现这个报错？ #

从你的代码和页面结构来看，主要有两个可能：

1. 后端接口返回格式不统一：你当前视图的地图容器data-id是空的（data-id=""），AJAX带着空ID请求/ajax/company-localizations接口时，后端可能返回的不是数组——可能是单个地址对象、null，甚至是错误信息，这就导致addresses没法用forEach。
2. 业务场景差异：之前能正常运行的视图是多地点场景，后端返回数组；但当前视图是单个公司地址，后端可能直接返回了单个对象，而非包含该对象的数组。

具体解决方案 #

方案1：统一后端接口返回格式（最推荐） #

不管请求的是单个地址还是多个地址，让后端接口始终返回数组格式：

• 如果没有地址，返回空数组[]
• 如果是单个地址，返回[单个地址对象]
  这样前端代码完全不用改，就能兼容单地点和多地点两种场景。

方案2：前端代码做兼容处理 #

如果后端暂时没法修改，那我们就在前端把addresses强制转为数组再处理：

方式一：在AJAX回调里处理

修改AJAX的done回调，先把非数组的addresses转成数组：

.done(function(addresses) {
    // 统一转为数组：如果是数组就用原数据，是单个对象就包成数组，空值就用空数组
    const normalizedAddresses = Array.isArray(addresses) ? addresses : (addresses ? [addresses] : []);
    setMarkersOnMap(normalizedAddresses, geocoder);
});

方式二：在setMarkersOnMap开头处理

也可以在调用getAllAddresses之前，先做格式统一：

function setMarkersOnMap(addresses, geocoder) {
    // 确保addresses是数组
    const normalizedAddresses = Array.isArray(addresses) ? addresses : (addresses ? [addresses] : []);
    var deferreds = getAllAddresses(geocoder, normalizedAddresses);
    // 后面的代码保持不变...
}

额外优化：处理AJAX请求失败的情况 #

你目前的代码没处理请求失败的场景，建议加上fail回调，避免请求出错时页面毫无反应：

$.ajax({
    type: 'POST',
    dataType: 'json',
    url: '/ajax/company-localizations',
    data: {id: $googleMap.data('id')}
})
.done(function(addresses) {
    const normalizedAddresses = Array.isArray(addresses) ? addresses : (addresses ? [addresses] : []);
    setMarkersOnMap(normalizedAddresses, geocoder);
})
.fail(function(xhr, status, error) {
    console.error('加载地址数据失败:', error);
    // 这里可以给用户显示提示，比如"地图加载失败，请稍后重试"
});

针对当前视图的高效优化 #

既然当前视图的地图容器已经通过data-address存了单个公司的地址，你可以直接用这个地址，不用走AJAX请求，更高效：

function initMap() {
    var geocoder = new google.maps.Geocoder();
    const directAddress = $googleMap.data('address');
    if (directAddress) {
        // 直接用页面上的地址生成标记
        setMarkersOnMap([directAddress], geocoder);
    } else {
        // 原来的AJAX请求逻辑
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: '/ajax/company-localizations',
            data: {id: $googleMap.data('id')}
        })
        .done(function(addresses) {
            const normalizedAddresses = Array.isArray(addresses) ? addresses : (addresses ? [addresses] : []);
            setMarkersOnMap(normalizedAddresses, geocoder);
        })
        .fail(function(xhr, status, error) {
            console.error('加载地址数据失败:', error);
        });
    }
}

内容的提问来源于stack exchange，提问作者Mattpl12