2012-11-13 138 views
2

我正在製作Google地圖,以在當地進行犯罪活動。它的作品,但現在我想過濾使用同一頁上的表單的街道名稱,日期範圍,性質等。刷新Google地圖

我跟着教程位於這裏https://developers.google.com/academy/apis/maps/visualizing/earthquakes

他們使用jsonp feed作爲數據源。

script.src = 'http://earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week' 

我創建了一個名爲「process_request.php」的劇本,從我區返回的犯罪數據一致。

我迷失在如何應用我的過濾器/表單標準。所以這裏是我的問題...我應該使用AJAX來更新window.eqfeed_callback?表單動作應該是「index.php」還是「process_request.php」?我應該在我的表格中使用onsubmit="refreshMap();"嗎?

<script> 
     var map; 

     function initialize() { 
     var mapOptions = { 
      zoom: 13, 
      center: new google.maps.LatLng(37.749919,-68.869871), 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
     }; 

     map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

     // Create a <script> tag and set the USGS URL as the source. 
     var script = document.createElement('script'); 
     // (In this example we use a locally stored copy instead.) 
     // script.src = 'http://earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week'; 
     script.src = 'https://example.com/crime/process_request.php'; 
     document.getElementsByTagName('head')[0].appendChild(script); 
     } 

     // Loop through the results array and place a marker for each 
     // set of coordinates. 
     window.eqfeed_callback = function(results) { 

     var infowindow = new google.maps.InfoWindow(); 

     for (var i = 0; i < results.features.length; i++) { 
      var coords = results.features[i].geometry.coordinates; 
      var latLng = new google.maps.LatLng(coords[0],coords[1]); 
      var weight_factor = results.features[i].properties.weight; 

      var marker = new google.maps.Marker({ 
       position: latLng, 
       map: map, 
       icon: getCircle(weight_factor), 
      }); 

      google.maps.event.addListener(marker,'click', (function(marker, i) { 
       return function() { 
        infowindow.setContent('<strong>Address:</strong> ' + results.features[i].properties.address + "<br><strong>Total Reports:</strong> "+ results.features[i].properties.weight + "<br><strong>Nature:</strong> " + results.features[i].properties.nature); 
        infowindow.open(map, marker); 
       } 
      })(marker, i)); 

     } 
     } 

    function getCircle(weight_factor) { 
     return { 
      path: google.maps.SymbolPath.CIRCLE, 
      fillColor: 'red', 
      fillOpacity: .3, 
      scale: weight_factor * 3, //Math.pow(2, magnitude)/Math.PI, 
      strokeColor: 'white', 
      strokeWeight: .8 
     }; 
    } 

    </script> 

回答

0

我結束了返工大部分腳本,並從頭開始構建JSON(我不認爲我會需要的JSONP功能),並使用一個JavaScript函數的形式action

<form name="filter_form" action="javascript:drawMap(getData())" method="POST">