使用按钮获取谷歌地图上的json数据和过滤标记 - Get json data and filter markers on google maps with button

Get json data and filter markers on google maps with button

我有这个功能在单击外部html页面的按钮时可视化标记。数据来自文件.php（getJSON），但我想创建不同的按钮来获取不同的PHP文件。如何在不复制和粘贴相同脚本的情况下为不同的按钮设置我的函数？！

function initialize() {
var mapOptions = {
    center: new google.maps.LatLng(0, 0),
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
$('#button').click(function () {
$.getJSON( "file.php", function(data) {    
   
$.each( data, function(i, value) {
var myLatlng = new google.maps.LatLng(value.lat, value.lon);
alert(myLatlng);
var marker = new google.maps.Marker({position: myLatlng, map: map, title: "text " + value.lon, icon: "images/marker.png"});
var infowindow = new google.maps.InfoWindow ({
content: "<b>City:</b> " + value.city + "<br>" +
         "<b>Country:</b> " + value.country + "<br>" +
         "<b>Date:</b> " + value.day + "-" + value.month + "-" + value.year + "<br>" +
         "<b>Killed:</b> " + value.killed + "<br>" +
         "<b>Wounded:</b> " + value.wounded + "<br>" +
         "<b>Attack Type:</b> " + value.attack_type + "<br>" +
         "<b>Organization:</b> " + value.guilty + "<br>" 
                         
});
marker.addListener('click', function() {
    infowindow.open(map, marker);});
});
});
});
}

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title> Title </title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script type="text/javascript" src = "http://maps.google.com/maps/api/js?sensor=false"></script>
		
		<script type="text/javascript" src="js/map.js" > </script>
</head>
<body onload="initialize()">
    
<button id="button">Button</button> </br>
<button id="button2">Button2</button> </br>
<button id="button3">Button3</button> </br>
<div id="map_canvas" style="width: 100%; height: 300px;"> </div>
</body>
</html>

尝试使用通用函数来显示结果

<script>
var map;
function initialize() {
  var mapOptions = {
      center: new google.maps.LatLng(0, 0),
      zoom: 2,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  $('#button').click(function () {
    showMyMarker( "file.php");
  })
  $('#button1').click(function () {
    showMyMarker( "file1.php");
  })
  $('#button2').click(function () {
    showMyMarker( "file2.php");
  })
}
function showMyMarker(myFile){
  $.getJSON( myFile, function(data) {    
    $.each( data, function(i, value) {
      var myLatlng = new google.maps.LatLng(value.lat, value.lon);
      alert(myLatlng);
      var marker = new google.maps.Marker({position: myLatlng, map: map, title: "text " + value.lon, icon: "images/marker.png"});
      var infowindow = new google.maps.InfoWindow ({
        content: "<b>City:</b> " + value.city + "<br>" +
             "<b>Country:</b> " + value.country + "<br>" +
             "<b>Date:</b> " + value.day + "-" + value.month + "-" + value.year + "<br>" +
             "<b>Killed:</b> " + value.killed + "<br>" +
             "<b>Wounded:</b> " + value.wounded + "<br>" +
             "<b>Attack Type:</b> " + value.attack_type + "<br>" +
             "<b>Organization:</b> " + value.guilty + "<br>" 
      });
      marker.addListener('click', function() {
          infowindow.open(map, marker);
      });
    });
  });
};   
 </script>