使用Map.fitBounds时谷歌地图Marker图标无法随缩放调整的问题求助

问题根源 #

1. 未初始化Bounds对象：你只调用了bounds.extend(marker0.position)，但没有先创建google.maps.LatLngBounds实例，这会直接触发JS报错，中断后续代码执行（包括zoom_changed事件的监听逻辑）。
2. 非整数缩放级别处理缺失：调用fitBounds后，地图的缩放级别可能是非整数值（比如14.6），而你的代码直接用zoom - 12作为数组索引，小数索引会返回undefined，导致scaledSize设置失效。
3. Marker属性名错误：原代码中Marker配置的Map是大写，谷歌地图API要求该属性名为小写map，这会导致Marker无法正确关联到地图，间接影响后续图标缩放逻辑。

修复代码 #

function initMap() {
    // 初始化地图实例
    const GoogleMap = new google.maps.Map(document.getElementById('MapInsert'), {
        zoom: 15, 
        scrollwheel: false, 
        zoomControl: true,
        styles: [{ 'featureType': 'poi', 'stylers': [{ 'visibility': 'off' }] }],
        center: { lat: 51.187831, lng: -2.545948 }
    });

    // 创建Marker并关联地图
    const marker0 = new google.maps.Marker({
        map: GoogleMap,
        position: { lat: 51.187096, lng: -2.544606 },
        title: 'Test1',
        optimized: false,
        icon: '/clubs/flooding/icons/culverticon.png'
    });

    // 初始化Bounds并调整地图视图
    const bounds = new google.maps.LatLngBounds();
    bounds.extend(marker0.position);
    GoogleMap.fitBounds(bounds);

    // 监听缩放变化，动态调整Marker图标大小
    google.maps.event.addListener(GoogleMap, 'zoom_changed', function () {
        const zoomSizes = [8, 15, 25, 40, 50, 60, 70, 80, 90, 100];
        let zoom = this.getZoom();
        // 将非整数缩放级别转为整数，确保数组索引有效
        zoom = Math.round(zoom);
        // 限制缩放范围在12-21区间内
        zoom = Math.max(12, Math.min(21, zoom));
        const relativePixelSize = zoomSizes[zoom - 12];
        
        marker0.setIcon({
            url: '/clubs/flooding/icons/culverticon.png', 
            scaledSize: new google.maps.Size(relativePixelSize, relativePixelSize)
        });
        marker0.setTitle(`Zoom: ${zoom} IconSize: ${relativePixelSize}`);
    });
};

关键修改说明 #

• 新增const bounds = new google.maps.LatLngBounds();初始化Bounds对象，消除报错。
• 将Marker配置的Map改为小写map，确保Marker正确绑定到地图。
• 用Math.round(zoom)将缩放级别转为整数，避免小数索引导致的数组取值错误。
• 使用Math.max和Math.min简化缩放范围限制逻辑，代码更严谨简洁。

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