4

私は自分の地域での犯罪活動をプロットするために Google マップに取り組んでいます。それは機能しますが、同じページのフォームを使用して、通りの名前、日付範囲、自然などでフィルタリングしたいと考えています。

https://developers.google.com/academy/apis/maps/visualizing/earthquakesにあるチュートリアルに従いました。

データ ソースとして jsonp フィードを使用しています。

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

1 に答える 1

1

ほとんどのスクリプトを作り直して、json を最初から作成し (jsonp 機能は必要ないと思います)、form に JavaScript 関数を使用しましたaction。

<form name="filter_form" action="javascript:drawMap(getData())" method="POST">
于 2012-11-14T02:21:58.793 に答える