양식에 Google지도 다시로드하기 제출

JSON 파일의 마커를로드하고 페이지가 처음로드 될 때이를 표시하는 Google지도를 만들었습니다. 이 기능 비트는 올바르게 작동합니다. 그러나 내 페이지에는 양식도 포함되어 있으며 양식을 제출하여지도를 업데이트하면 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 (마이크 윌리엄스의 v2 튜토리얼에서)지도를 그대로두고 다시 초기화하지 않고 표시되는 데이터 (마커) 만 변경하면됩니다.

마커에서지도 작성을 분리하고 페이지로드시지도를 초기화하고 .getJSON을 호출하여 원본 데이터를 가져옵니다. 폼 제출 (또는 버튼 클릭)에서 모든 마커를 제거하고 .getJSON을 다시 호출하여 양식의 해당 데이터를 전달하십시오.

출처

2013-02-05 14:35:01 geocodezip

고맙습니다. 그게 효과가 있었어. 참조 용 수정 된 코드 :

$('#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지도 다시로드하기 제출

답변

관련 문제