0

JSON ファイルからマーカーを読み込み、ページが最初に読み込まれたときにそれらをプロットする Google マップを作成しました。この機能は正しく動作します。ただし、私のページにはフォームも含まれており、マップを更新するためにフォームが送信されたときに getJSON リクエストを再度発行したいと考えています。これは私が仕事に就けないビットです。誰かが私が間違っていることを見ることができますか?

<!doctype html>

<html lang="en">
    <head>
        <script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="jquery.ui.map.js"></script>
        <script>
            // convert form parameters sent using getJSON method to JSON
            $.fn.serializeObject = function() {
                var o = {};
                var a = this.serializeArray();
                $.each(a, function() {
                    if (o[this.name]) {
                        if (!o[this.name].push) {
                            o[this.name] = [o[this.name]];
                        }
                        o[this.name].push(this.value || '');
                    } else {
                        o[this.name] = this.value || '';
                    }
                });
                return o;
            };          

            $(function() {
                // method to initialise map
                function initialise() {
                    $('#map_canvas').gmap({
                        'disableDefaultUI':true, 'callback': function() {
                            var self = this;
                            $.getJSON( 'http://localhost:8888/googlemaps/demo.json', 
                                $('#filter').serializeObject(),
                                function(data) { 
                                    $.each( data.markers, function(i, marker) {
                                        self.addMarker({ 'position': new google.maps.LatLng(marker.latitude, marker.longitude), 'bounds':true } ).click(function() {
                                            self.openInfoWindow({ 'content': marker.content }, this);
                                        });
                                    });
                                }
                            );
                        }
                    });
                }

                // initial map on page load
                initialise();

                // reinitialise map on form submit
                $('#filter').submit(function(e) {
                    initialise();
                    e.preventDefault();
                });          
            });
        </script>   
    </head>

    <body>
        <form id="filter">
            <select name="foo" id="foo">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>

            <select name="bar" id="bar">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>

            <input type="submit">
        </form>

        <div id="map_canvas" style="height:400px; width:100%;"></div>
    </body>
</html>
4

3 に答える 3

2

destroyマップを再度初期化する前に、マップの-methodを呼び出します。

于 2013-02-05T14:09:16.960 に答える
1

「AJAX」哲学（Mike Williamsのv2チュートリアルから）は、マップを離れ（再初期化しないでください）、表示されたデータ（マーカー）を変更するだけです。

マップの作成をマーカーから分離し、ページの読み込み時にマップを初期化し、元のデータに対して.getJSONを呼び出します。フォームの送信（またはボタンクリック）時に、すべてのマーカーを削除し、.getJSONを再度呼び出して、フォームから適切なデータを渡します。

于 2013-02-05T14:35:01.400 に答える
0

Linuxios に感謝します。それはうまくいきました。参照用の修正コード:

$('#filter').submit(function(e) {
  $('#map_canvas').gmap('destroy');
  initialise();
  e.preventDefault();
});

また、キャッシングを防ぐために、現在の時刻を getJSON URL に追加しました。

$.getJSON( 'http://localhost:8888/googlemaps/demo.json?' + new Date().getTime()
于 2013-02-05T14:49:36.380 に答える