使用复选框或表单提交过滤Google Map
|
我一直试图找出如何在单击复选框时使我的地图按三个不同区域过滤。
<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>
没有找到相关结果
已邀请:
0 个回复