jquery - 使用 JQuery 显示隐藏的 div 时出现图形 Google Maps 错误

Question

我正在使用 JQuery 显示一个包含 Google 地图的隐藏 div。

这是JQuery：

$(function(){
$('#searchBox').on('keydown', function(event) {
    if (event.keyCode == 13) {
        if ($(this).val() == "london" || "LONDON") 
            $('#border').slideDown('fast')
        else 
            $('#border').slideUp('fast');
    }
});
});

这是我的 HTML：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<div id = "border">
<div id = "map_canvas">
<div id="searchContainer">
<input id="searchBox" type="text" size="50"  placeholder="SEARCH">

这是我输入“伦敦”时的结果：

地图的内容只显示在左上角，但地图显然在那里。

我正在使用此代码将搜索框与地图链接，但它并不完美：https ://google-developers.appspot.com/maps/documentation/javascript/examples/places-autocomplete

ps 由于某种原因，返回键不适用于搜索框。

Answer 1

当我们开发一个具有谷歌地图功能的网站时，我也经历过类似的事情。添加此行以查看问题是否消失：

//Test for hidden div map
google.maps.event.trigger([your_map_variable], 'resize');

在隐藏 div 中处理 Google 地图时，这是一个相当普遍的问题。