0

Google マップ機能を構築しています。ユーザーがボタンをクリックすると、jquery スクリプトはテキストボックスからアドレスを取得する必要がありますが、正しく機能しません。私が間違っていることを誰か知っていますか？

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=en"></script>
<script type="text/javascript" src="<?=base_url()?>data/gmap3.js"></script>

<script>
    $(document).ready(function() {
        function getAddress() {
            $("#addressClick").click(function() {
                $('#address').val();
            });
        }
        $("#my_map").gmap3({
            marker: {
                address: getAddress()
            }, map:{
                options:{
                    zoom: 14
                }
            }
        });
    });
</script>
<input id="address" type="text" placeholder="Please type in your address"><input type="button" value="Go to location" id="addressClick">
<div id="my_map" style=" height: 350px; width: 300px;"></div>
4

1 に答える 1

1

ボタンがクリックされるまでマップをロードしたくないようです。ただし、ページの準備が整うとすぐにマップを読み込みます。そして、あなたはアドレスとして渡しundefinedています：

address: getAddress()

関数getAddress()には戻り値がないため、その値をプロパティに代入すると、プロパティの値は になりますundefined。ボタンgetAddress()にクリック ハンドラを割り当てるだけです。クリック ハンドラー内では、テキスト ボックスの値が読み取られますが、その値は無視されます。

ボタンがクリックされた後にマップをロードする場合は、クリック ハンドラー内でマップをロードするコードを移動する必要があります。また、そのクリック ハンドラー バインディングをgetAddress()関数の外に移動します。

$(document).ready(function() {
    $("#addressClick").click(function() {
        $("#my_map").gmap3({
            marker: {
                address: $('#address').val()
            }, map:{
                options:{
                    zoom: 14
                }
            }
        });
    });
});

実際のデモ: jsfiddle.net/wFxDR

于 2012-11-16T17:39:58.853 に答える