Question

我创建了一个Google地图，可以从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>

Answer 1

在再次初始化之前调用地图的destroy - 方法。

Answer 2

"AJAX" Philosophy（来自Mike Williams的v2教程），将离开地图（不要重新初始化它），只需更改显示的数据（标记）。

将地图创建与标记分开，在页面加载时初始化地图，并为原始数据调用.getJSON。在表单提交（或按钮单击）上，删除所有标记并再次调用.getJSON，从表单传入适当的数据。

Answer 3

感谢Linuxios。那很有效。修改后的代码供参考：

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

我还将当前时间附加到getJSON URL以防止缓存。

$.getJSON( 'http://localhost:8888/googlemaps/demo.json?' + new Date().getTime()

在表单上重新加载Google Map

3 个答案: