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

【问题标题】：Graphical Google Maps error when using JQuery to show a hidden div使用 JQuery 显示隐藏的 div 时出现图形 Google Maps 错误
【发布时间】：2013-03-04 04:13:57
【问题描述】：

我正在使用 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">

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

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

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

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

【问题讨论】：

显示您的 html 标记
作为旁注，我会将输入值转换为大写或小写并对此进行测试 - 否则，如果我输入“London”，我将不会得到结果。
是的，我一定会这样做的。
另外，你不能做$(this).val() == "london" || "LONDON" - 它必须是$(this).val() == "london" || $(this).val() == "LONDON" - 每个都必须是一个比较。
谢谢。我宁愿它只是在按下输入时显示，但由于某种原因if (event.keyCode == 13) { 不起作用。

标签： jquery google-maps html show hidden

【解决方案1】：

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

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

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

【讨论】：

这样解决了问题，但仍然存在一些问题。等等。
我在搜索栏中使用此代码进行自动完成：google-developers.appspot.com/maps/documentation/javascript/…
您似乎正在处理一个单独的问题。您是说地点自动完成功能不起作用吗？您上面的代码清单不完整，无法尝试诊断可能存在的问题。根据您对 enter 键不起作用的评论，我只能猜测某些行正在引发错误。你的开发者工具揭示了什么？
好吧，你说得对，这是一个单独的错误。尽管谷歌提供的示例不允许您在不从列表中选择选项的情况下进行搜索。例如，输入“london”并按回车没有任何作用。您的解决方案似乎已经解决了最初的问题。