重新载入表单上的Google地图提交

我创建了一个Google地图，该地图从JSON文件加载标记，并在页面首次加载时绘制它们。这一点功能正常工作。但是，我的页面还包含一个表单，我希望在提交表单以更新地图时再次触发getJSON请求。这是我无法工作的一点。任何人都可以看到我做错了什么？重新载入表单上的Google地图提交

<!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>

来源

2013-02-05 Simon Bingham

调用destroy - 地图的方法，然后再次初始化它。

来源

2013-02-05 14:09:16

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

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

来源

2013-02-05 14:35:01 geocodezip

谢谢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-05 14:49:36

重新载入表单上的Google地图提交

回答

相关问题