獲取JSON數據和過濾器標記谷歌地圖上的按鈕

我有這個功能來可視化標記點擊按鈕從外部html頁面。數據來自file.php（getJSON），但我想創建不同的按鈕來獲取不同的PHP文件。如何在不復制的情況下爲不同的按鈕設置我的功能並粘貼相同的腳本？獲取JSON數據和過濾器標記谷歌地圖上的按鈕

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> 
 
\t <head> 
 
\t \t <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
\t \t <title> Title </title> 
 
\t \t <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
\t \t <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
 
\t \t <script type="text/javascript" src = "http://maps.google.com/maps/api/js?sensor=false"></script> 
 
\t \t 
 
\t \t <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>

來源

2016-02-04 Savino Pasculli

嘗試使用一個共同的功能顯示結果

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

來源

2016-02-04 16:10:46 scaisEdge

這不加載地圖，可以ü請給我所有運行的代碼？ –

我已經更新了答案..現在地圖應該可以工作。 – scaisEdge

函數showMyMarker（myFile），而不是showMyFile（myFile）。 –

獲取JSON數據和過濾器標記谷歌地圖上的按鈕

回答

相關問題