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>