У меня есть проблема, которую мне не удалось решить.
Я разработал небольшой скрипт для загрузки карты Google. Этот скрипт использует HTML 5 для определения вашего текущего местоположения, а затем показывает некоторые места на карте. Это места, которые читаются из базы данных MySQL.
Проблема в том, что мне нужно как-то отфильтровать их по категориям. PHP-файл отвечает за генерацию XML-файла из базы данных MySQL.
Я мог бы передать следующий параметр, чтобы выбрать категорию: file.php? Category = что-то
downloadUrl("file.php?cat=something", function(data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(markers[i].getAttribute("name"), markers[i].getAttribute("address"), markers[i].getAttribute("type"), latlng);
}
});
Проблема в том, что я хочу изменить категорию, например, когда нажимаю на ссылку.
Представьте, что у вас есть карта для левой и правой категорий. Затем при нажатии на категорию карта автоматически удаляет места, отмеченные в текущей категории, и отображает только новую категорию.
В заключение, в какой части написано file.php? Категория = что-то, значение «что-то» должно изменяться динамически.
Я думаю, что это может быть связано с Jquery, но я не знаю точно, как. Я пробовал несколько способов и до сих пор не сделал этого.
Мне просто нужен способ изменить значение этой части, и карта автоматически отключит другие категории, например:
var something = doctor;
downloadUrl("file.php?cat="+something, function(data) {
Это полный код моего скрипта:
<!DOCTYPE html>
<html>
<head>
<title>Geolocalización</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<link href="estilo.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="util.js"></script>
</head>
<body onload="initialize()">
<div id="info"></div>
<div id="map_canvas" style="width: 780px; height: 600px; margin: 0 auto;"></div>
<script type="text/javascript">
var map;
var infowindow;
var geocoder;
var marker;
function initialize() {
var myOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
downloadUrl("phpsqlajax_genxml.php?cat=doctor", function(data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(markers[i].getAttribute("name"), markers[i].getAttribute("address"), markers[i].getAttribute("type"), latlng);
}
});
function createMarker(name, address, type, latlng) {
if(type=="doctor"){
var image = 'clinicas-y-hospitales.png';
}else{
var image = 'carabineros-y-seguridad.png';
}
var contentString = '<h2>'+name+'</h2> <br /><p>'+address+'</p>';
var marker = new google.maps.Marker({position: latlng, map: map, icon: image});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: contentString, maxWidth: 200});
infowindow.open(map, marker);
});
return marker;
}
geocoder = new google.maps.Geocoder();
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
map.setCenter(pos);
geocoder.geocode({'latLng': pos}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
marker = new google.maps.Marker({
position: pos,
map: map
});
infowindow = new google.maps.InfoWindow({content: '<p><strong>Usted está aquí:</strong> '+results[1].formatted_address+'</p>'});
infowindow.open(map, marker);
document.getElementById('info').innerHTML = results[1].formatted_address;
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: La geolocalización ha fallado.';
} else {
var content = 'Error: Tu navegador no soporta geolocalización.';
}
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
Чтобы увидеть запущенный скрипт, нажмите здесь:
http://pruebas.davidbanner.cl/geo/index.php
Подобный пример того, что мне нужно сделать, здесь:
http://mapas.vinadelmarchile.cl/index.php
Большое спасибо всем, кто может дать мне идею или помочь с кодом.
Привет.