使用按钮获取 json 数据并过滤 google 地图上的标记

Question

我有这个功能可以在点击外部 html 页面的按钮时可视化标记。数据来自 file.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>

Answer 1

尝试使用常用函数显示结果

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

使用按钮获取 json 数据并过滤 google 地图上的标记

Get json data and filter markers on google maps with button

javascript

php

json

google-maps

markers