Javascript — Получить данные JSON и маркеры фильтра на картах Google с помощью кнопки
У меня есть эта функция для визуализации маркеров по нажатию кнопки с внешней 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>Решение
Попробуйте использовать общую функцию для отображения результата
<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>
Другие решения
Других решений пока нет …