0

我创建了一个谷歌地图，它从 JSON 文件加载标记并在页面首次加载时绘制它们。这部分功能可以正常工作。但是，我的页面还包含一个表单，我想在提交表单以更新地图时再次触发 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在再次初始化之前调用地图的- 方法。

于 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 回答