当我点击一个复选框时,我很难弄清楚如何让我的地图按三个不同的区域过滤掉。
<style>
html, body { font-family:
Verdana, Geneva, Arial, Helvetica,
sans-serif; }
#map { width: 1400px; height: 800px; border: 1px solid black; }
</style>
<body>
<div id="Filters" style="margin:5px;background:#f4f4f4;border:1px solid #888;padding: 5px 5px 5px 10px;">
<label style="color:#555;font-size:12px; font-weight:bold;" for="tags">Filter
by:</label>
<select id="tags" style="outline:none;">
<option value="all">All</option>
<option value="Western">Western</option>
<option value="Central">Central</option>
<option value="Eastern">Eastern</option>
</select>
</div>
<form action="#"> All PC: <input type="checkbox" id="all" onclick="boxclick(this,'allpc')" />
Western: <input type="checkbox" id="Western" onclick="boxclick(this,'western')" />
Central: <input type="checkbox" id="Central" onclick="boxclick(this,'central')" />
Eastern: <input type="checkbox" id="Eastern" onclick="boxclick(this,'eastern')" /><br /> </form>
<div id="map"></div> </body>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function HomeControl(controlDiv, map)
{
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.padding = '5px';
// Set CSS for the control border
var controlUI = document.createElement('DIV');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Home';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior
var controlText = document.createElement('DIV');
controlText.style.fontFamily = Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = 4px';
controlText.innerHTML = '<b>Reset HHS Map</b>';
controlUI.appendChild(controlText);
// Setup the click event listeners
google.maps.event.addDomListener(controlUI,
'click', function() {
var resetmap = new google.maps.LatLng(37.09, -95.71);
map.setCenter(resetmap);
map.setZoom(5);
});
}
function EastOnly(eastDiv, map) {
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
eastDiv.style.padding = '5px';
// Set CSS for the control border var eastUI =
document.createElement('DIV');
eastUI.style.backgroundColor = 'white';
eastUI.style.borderStyle ='solid';
eastUI.style.borderWidth = '2px';
eastUI.style.cursor = 'pointer';
eastUI.style.textAlign = 'center';
eastUI.title = 'Click to set the map to Home';
eastDiv.appendChild(eastUI);
// Set CSS for the control interior
var eastText = document.createElement('DIV');
eastText.style.fontFamily = 'Arial,sans-serif';
eastText.style.fontSize = '12px';
eastText.style.paddingLeft = '4px';
eastText.style.paddingRight = '4px';
eastText.innerHTML = '<b>Eastern Only</b>';
eastUI.appendChild(eastText);
// Setup the click event listeners
// google.maps.event.addDomListener(eastUI, 'click', function() {
// var eastmap = new google.maps.LatLng(37.09, -95.71);
// map.setCenter(eastmap);
// map.setZoom(5);
// });
google.maps.event.addDomListener(eastUI,
'click', function hideeastern() {
for (var i=0; i<markers.length; i++) {
if (markers[i].region == 'eastern') {
alert('eastern');
//markers[i].setVisible(false);
}
}
}); }
(function() {
// Creating an array that will contain hhs icons
var hhsIcons = [];
hhsIcons['Eastern'] = new google.maps.MarkerImage('{!$Resource.markerE}' );
hhsIcons['Western'] = new google.maps.MarkerImage('{!$Resource.markerW}' );
hhsIcons['Central'] = new google.maps.MarkerImage('{!$Resource.markerC}' );
window.onload = function() {
// Create object literal containing the properties of the map
var options = {
zoom:5,
center: new google.maps.LatLng(37.09, -95.71),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
// Create the map
var map = new google.maps.Map(document.getElementById('map'),
options);
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(homeControlDiv);
var eastControlDiv = document.createElement('DIV');
var eastControl = new EastOnly(eastControlDiv, map);
eastControlDiv.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(eastControlDiv);
var jsonData = {'jsonaccounts':
[
<apex:repeat value="{!Accounts}" var="abc">
{
'lat': '{!abc.Latitude__c}',
'lng': '{!abc.Longitude__c}',
'hhs': '{!abc.HHS_Region__c}'
},
</apex:repeat>
]};
var accountname = [];
var pcnumber = [];
var director = [];
var vp = [];
var division = [];
var beds = [];
//Add field data for each account into respective arrays
<apex:repeat value="{!Accounts}" var="acc">
accountname.push("{!acc.name}");
pcnumber.push("{!acc.PC__c}");
director.push("{!acc.hhs_director__r.name}");
vp.push("{!acc.area_vp__r.name}");
division.push("{!acc.HHS_Region__c}");
beds.push("{!acc.Beds__c}");
</apex:repeat>
// Create a variable that will hold the InfoWindow object
var infowindow;
var markers = [];
// Loop through the jsondata
for (var i = 0; i < jsonData.jsonaccounts.length; i++) {
var jsonaccounts = jsonData.jsonaccounts[i];
// Create marker data
var myMarkerData = { // collecting all custom data that you want to add
region : jsonaccounts.hhs, // to the marker object within an array.
}
// Adding the markers
var marker = new google.maps.Marker({
position: new google.maps.LatLng(jsonaccounts.lat,
jsonaccounts.lng),
map: map,
icon: hhsIcons[jsonaccounts.hhs],
data: myMarkerData
});
marker.region = jsonaccounts.hhs;
markers.push(marker);
alert(markers[i].region);
// Wrap the event listener inside an anonymous function
// that we immediately invoke and passes the variable i to.
(function(i, marker) {
// Create the event listener. It now has access to the values of
// i and marker as they were during its creation
google.maps.event.addListener(marker,
'click', function() {
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
// Set the content of the InfoWindow
infowindow.setContent('<b>' + accountname[i] + '</b>' +
'<br/>PC#: ' + pcnumber[i] +
'<br/>Director: ' + director[i] +
'<br/>VP: ' + vp[i] +
'<br/>Division: ' + division[i] +
'<br/>Beds: ' + beds[i]);
// Tie the InfoWindow to the marker
infowindow.open(map, marker);
});
})(i, marker);
}
}; })();
marker.region = region;
markers.push(marker); function
hide(region) {
for (var i=0; i<map.markers.length; i++) {
if (map. markers[i].region == region) {
map.markers[i].setVisible(false);
}
}
document.getElementById(eastern+"box").checked
= true;
}
function boxclick(box,region) {
if (box.checked) {
show(region);
} else {
hide(region);
}
}
</script>