Google Maps初始化缩放异常：首次加载未自动适配标记范围

问题现象 #

页面首次加载地图时，缩放级别停留在国家范围（预期应自动缩放至所有标记覆盖的区域）；但手动调用initMap();重绘地图时，地图能正常适配标记边界，缩放级别符合预期。

问题原因 #

geocodeAddress函数中的地理编码请求是异步操作，而initMap里调用map.fitBounds(bounds)的代码是同步执行的——在所有地理编码回调完成、标记被添加到markers数组之前，这段代码就已经运行了。此时markers.length为0，fitBounds逻辑不会触发，地图保持初始化时的缩放级别（zoom:3）。

手动调用initMap时，之前的地理编码请求可能已完成，markers数组中已有标记数据，因此fitBounds能正常生效；或者地理编码服务返回缓存结果，回调执行速度快于同步代码，使得markers数组在fitBounds执行前已有内容。

修复方案 #

将每个地理编码请求包装为Promise，等待所有请求完成后再计算边界并调整地图缩放：

let customerList = ....; // JSON object
let map = '';
let markers = [];

function initMap() {
    // 清空之前的标记，避免手动调用时重复添加
    markers.forEach(marker => marker.setMap(null));
    markers = [];

    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 3,
        center: { lat: 35, lng: -105 },
        mapTypeControl: false,
        panControl: false,
        zoomControl: true,
        streetViewControl: false
    });

    // 将所有地理编码请求转为Promise
    const geocodePromises = customerList.map(customer => {
        return new Promise((resolve, reject) => {
            geocodeAddress(customer, resolve, reject);
        });
    });

    // 等待所有地理编码完成后调整地图边界
    Promise.all(geocodePromises)
        .then(() => {
            if (markers.length > 0) {
                const bounds = new google.maps.LatLngBounds();
                markers.forEach(marker => {
                    bounds.extend(marker.getPosition());
                });
                map.fitBounds(bounds);
            }
        })
        .catch(error => {
            console.error('地理编码请求出错:', error);
        });
}

function geocodeAddress(customer, resolve, reject) {
    const geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': customer.Address }, function (results, status) {
        if (status === 'OK') {
            const marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                title: customer.Name,
                icon: markerIcon
            });

            const infowindow = new google.maps.InfoWindow({
                content: `<div><strong>${customer.Name}</strong><br>${customer.Address}</div>`
            });

            marker.addListener('click', function () {
                infowindow.open(map, marker);
            });

            markers.push(marker);
            resolve();
        } else {
            const errorMsg = `地理编码失败，原因：${status}`;
            alert(errorMsg);
            reject(errorMsg);
        }
    });
}

关键改动点 #

• 用Promise.all等待所有异步地理编码请求完成，确保markers数组已包含所有标记后再执行fitBounds
• 手动调用initMap时先清空旧标记，避免重复添加
• 统一处理地理编码的成功/失败回调，保证流程完整性

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