我正在创建商店定位器（使用Google Maps API v3），其中有3个复选框可将标记过滤到类别中。我让他们单独使用if语句，但无法弄清楚如何让他们一起工作。例如：如果我取消选中Bar但它也是一个BottleShop（选中了Bottleshop），标记仍应显示在地图上。标记数据从XML文件中提取。三个过滤器类别是Bar，Bottle Shop和Online Retailer。每个标记可以属于多个过滤器。例如：它可以是酒吧和瓶子店。
我的XML示例
<marker name="John's Pizzeria" bar="TRUE" bottleshop="TRUE" onlineretailer="FALSE" address="260 W 44th St, New York, NY" lat="40.758072" lng="-73.987740" type=""/>
我的HTML
<div id="location"></div>
<div id="map" class="map" style="height:400px; width:600px;"></div>
<input id="addressInput" value="Enter location" />
<input id="radiusSelect" value="25" />
<input type="button" id="search" value="Search"/>
<form action="#">
Bar: <input type="checkbox" id="bar" onclick="boxclick(this,'bar')" checked/>
Bottle Shop: <input type="checkbox" id="bottleshop" onclick="boxclick(this,'bottleshop')" checked/>
Online Stockist: <input type="checkbox" id="onlineretailer" onclick="boxclick(this,'onlineretailer')" checked/>
</form>
<select id="locationSelect" class="span12"></select>
我的JavaScript
var map = null;
var markers = [];
var infoWindow;
var True = "TRUE";
var catBar = [];
jQuery(document).ready(function($){
//Load Google Maps
load();
//When user clicks search, fire the search locations function
$('#search').click(function() {
searchLocations();
});
});
//On page load Create a google map in #map
//Set default cordinates & Map style to roadmap
function load() {
var location = "Showing default location for map.";
var locationSelect;
//Set default Lat Long for when map loads
var latlng = new google.maps.LatLng(43.907787,-79.359741);
// If users location is found then overwrite latlng variable and use this location
if (google.loader.ClientLocation) {
zoom = 13;
latlng = new google.maps.LatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude);
location = "Showing IP-based location: <b>" + getFormattedLocation() + "</b>";
address = getFormattedLocation();
// Add users location to search input and load local stores
document.getElementById('addressInput').value=address;
}
var myOptions = {
zoom: 13,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
document.getElementById("location").innerHTML = location;
infoWindow = new google.maps.InfoWindow({
size: new google.maps.Size(150,50)
});
locationSelect = document.getElementById("locationSelect");
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
if (markerNum != "none") {
google.maps.event.trigger(markers[markerNum], 'click');
}
};
searchLocations();
}
//Format the location
function getFormattedLocation() {
if (google.loader.ClientLocation.address.country_code == "US" &&
google.loader.ClientLocation.address.region) {
return google.loader.ClientLocation.address.city + ", "
+ google.loader.ClientLocation.address.region.toUpperCase();
} else {
return google.loader.ClientLocation.address.city + ", "
+ google.loader.ClientLocation.address.country_code;
}
}
//Search for LAT/LNG of a place using its address using Google Maps Geocoder
function searchLocations() {
var address = document.getElementById("addressInput").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//console.log('search worked');
//console.log(results);
searchLocationsNear(results[0].geometry.location);
} else {
alert(address + ' not found');
}
});
}
//Clears Previous location, in info box
function clearLocations() {
infoWindow.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
locationSelect.innerHTML = "";
var option = document.createElement("option");
option.value = "none";
option.innerHTML = "See all results:";
locationSelect.appendChild(option);
}
//Look for locations near by and loop through all data getting lat & lng of each marker
function searchLocationsNear(center) {
clearLocations();
searchLoc = center;
var radius = document.getElementById('radiusSelect').value;
//console.log(radius);
var searchUrl = 'http://localhost:8888/starward/wp-content/themes/starward/map_request.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
// alert(markerNodes.length);
for (var i = 0; i < markerNodes.length; i++) {
var name = markerNodes[i].getAttribute("name");
var barValue = markerNodes[i].getAttribute("bar");
var bottleshopValue = markerNodes[i].getAttribute("bottleshop");
var onlineRetailerValue = markerNodes[i].getAttribute("onlineretailer");
var address = markerNodes[i].getAttribute("address");
var distance = parseFloat(markerNodes[i].getAttribute("distance"));
var zoom = 13; //Infowindow Zoom level
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
if (!distance) distance = google.maps.geometry.spherical.computeDistanceBetween(latlng, searchLoc);
if (!address) address = latlng.toUrlValue(6);
if (!name) name = "marker "+i;
createOption(name, distance, i);
bounds.extend(latlng);
//Make sure paremeters are in correct order or values will be mixed up
createMarker(latlng, name, address ,zoom, barValue, bottleshopValue, onlineRetailerValue);
}
//map.fitBounds(bounds);
map.setZoom(13);
map.setCenter(center);
locationSelect.style.visibility = "visible";
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
google.maps.event.trigger(markers[markerNum], 'click');
};
});
}
//Creates marker on the map
//Adds event for user when they click address info pops up
function createMarker(latlng, name, address, zoom, barValue, bottleshopValue, onlineRetailerValue) {
// add the zoom links
var html = "<b>" + name + "</b> <br/>" + address
html += '<br><a href="javascript: map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+'));map.setZoom('+zoom+');">Zoom To</a>';
html += ' <a href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())+1);">[+]</a>';
html += ' <a href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())-1);">[-]</a>';
var marker = new google.maps.Marker({
position: latlng,
map: map,
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
marker.barValue = barValue;
marker.bottleshopValue = bottleshopValue;
marker.onlineRetailerValue = onlineRetailerValue;
marker.MyZoom = zoom;
markers.push(marker);
}
function show(category) {
//console.log(category);
for (var i=0; i<markers.length; i++) {
if (markers[i].barValue === 'TRUE' && "bar" === category) {
markers[i].setVisible(true);
} else if (markers[i].bottleshopValue === 'TRUE' && "bottleshop" === category) {
markers[i].setVisible(true);
} else if (markers[i].onlineRetailerValue === 'TRUE' && "onlineretailer" === category) {
markers[i].setVisible(true);
} else {
}
}
}
//Hides markers not in current ticked category
function hide(category) {
//console.log('hide function');
for (var i=0; i<markers.length; i++) {
//console.log(markers[i].barValue);
if (markers[i].barValue === "TRUE" && "bar" === category ) {
//console.log('hiding markers');
markers[i].setVisible(false);
} else if (markers[i].bottleshopValue === "TRUE" && "bottleshop" === category ) {
markers[i].setVisible(false);
} else if (markers[i].onlineRetailerValue === 'TRUE' && "onlineretailer" === category) {
markers[i].setVisible(false);
} else {
}
}
}
// == a checkbox has been clicked ==
function boxclick(box,category) {
if (box.checked) {
show(category);
} else {
hide(category);
}
// == rebuild the side bar
// makeSidebar();
}
function createOption(name, distance, num) {
var option = document.createElement("option");
option.value = num;
option.innerHTML = name + "(" + distance.toFixed(1) + ")";
locationSelect.appendChild(option);
}
//Look up XML sheet to get data
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
答案 0 :(得分：1)
有人给了我这个答案，但答案已经消失了。代码最终正常工作
function boxclick() {
//create an array of the checked checkbox-IDs
var c = j.grep(['onlineretailer','bottleshop','bar'],
function(i) {
return (j('#'+i.toLowerCase()+':checked').length);
//console.log(i); i holds each value in the array in lowercase form
});
//console.log(c); // C holds all the checkbox values in an array
//iterate over the markers and set their visibility
//to true when at least 1 of the checkbox-values matches
//otherwise to false
j.each(markers,function(i,m) {
this.setVisible(j.grep(c,function(v) {
console.log(c,v,m); // c = checkboxes checked, v = value , m = marker
return (m[v+'Value']=='TRUE')
}).length>0);
});
}