Question

我有一张地图画布，我需要在调整大小时进行检查。默认min-height为200px。

调整大小的方法是单击一个按钮，并在div中添加一个额外的类。这个额外的类将min-height的值更改为350px。

我没有成功地在div上添加一个监听器。因此，目前唯一可行的解决方案是按钮上的.on('click)事件。

    $('#resize').on('click', function(){
        setTimeout(function () {
            google.maps.event.trigger(map, "resize");
            map.fitBounds(bounds);
        }, 500);
    });

我尝试了以下解决方案但没有成功：

    // Attemt 1
    google.maps.event.addDomListener(document.getElementById('map-canvas'), 'resize', function() {
        google.maps.event.trigger(map, "resize");
        map.fitBounds(bounds);
    });

    // Attemt 2
        google.maps.event.trigger(map, "resize");
        map.fitBounds(bounds);
    });

    // Attemt 3
    $(window).resize(function() {
        google.maps.event.trigger(map, "resize");
        map.fitBounds(bounds);
    });

您可以看到我的JSFiddle here。

有谁知道我怎么做到这一点？

Answer 1

div不会触发调整大小，因此您无法监听该事件，然后执行您的代码。你可以做的是以下，我已经测试了它并且它有效。

    $(window).on('resize', function(){
        $('#map-canvas').trigger($.Event('resize'));
        map.fitBounds(bounds);
    });

    $('#map-canvas').bind('resize', function(){
        $('#map-canvas').toggleClass('resize'); 
    });

触发'resize'事件然后绑定到它就可以了。

Answer 2

这并没有直接回答这个问题，但是在Chrome开发者论坛上有关于删除非标准＆＃34; overflowchanged＆＃的一些有用的讨论，不同的方法和链接到这篇文章中的实现。 34;曾经为此提供一个解决方案：https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/1RCzsyEyNU8/5vNpxrhRbUIJ

如何检测div调整大小？

2 个答案: