Question

在网上搜索了几个小时后，我来到了这个网站： http://leonardogandini.com/projects/Google-Maps-API/map-resize 这正是我想要的。通过按下按钮调整谷歌地图的大小。

我对Jquery或Javascript没有太多经验，但我正在努力使这项工作。所以我复制了代码并尝试显示它。

当我输入此代码时，地图消失了。我错过了什么吗？谁能让这个工作好吗？感谢。

$(document).ready(function() {
$('#resizeuno').click(function() {
    $('#map_canvas').css({'width':'300','height':'400'});
    google.maps.event.trigger(map, 'resize');  
});
$('#reset').click(function() {
    $('#map_canvas').css({'width':'855','height':'550'});
    google.maps.event.trigger(map, 'resize');   
}); 
});

查看代码http://jsfiddle.net/yungchristie/9P9RG/1/

Answer 1

您忘记了宽度/高度背后的 px 。

<强> Working fiddle

$(document).ready(function() {
    var $mapCanvas = $('#map-canvas');

    $('#resizeuno').click(function() {
        $mapCanvas.css({'width':'300px','height':'400px'});
        google.maps.event.trigger(map, 'resize');  
    });

    $('#reset').click(function() {
        $mapCanvas.css({'width':'855px','height':'550px'});
        google.maps.event.trigger(map, 'resize');   
    }); 
});

如果你只是添加一个类，而不是通过jQuery设置CSS会更好：

$(document).ready(function() {
    var $mapCanvas = $('#map-canvas');

    $('#resizeuno').click(function() {
        $mapCanvas.addClass('map_resize');
        google.maps.event.trigger(map, 'resize');  
    });

    $('#reset').click(function() {
        $mapCanvas.removeClass('map_resize');
        google.maps.event.trigger(map, 'resize');   
    }); 
});

在你的CSS中：

#map-canvas {
    width: 855px;
    height: 550px;
}

#map-canvas.map_resize {
    width: 300px;
    height: 400px;
}

如何使用按钮更改谷歌地图的大小

1 个答案: