-2

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

ps 何らかの理由でリターン キーが検索ボックスで機能しません。

4

1 に答える 1

1

Google マップ機能を備えたサイトを開発していたときに、似たようなことがありました。次の行を追加して、問題が解決するかどうかを確認します。

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

非表示の div で Google マップを扱う場合、これはかなり一般的な問題です。

于 2013-03-04T04:44:39.120 に答える