Google Maps V3 fitBounds auf sichtbaren Markierungen
Es fällt mir schwer, klare Informationen darüber zu erhalten, aber ich versuche, FitBounds auf sichtbaren Markern zu erzielen.
Das Array definiert Titel, Kategorie, Lat / Long und Href. Es werden alle Markierungen zur Karte hinzugefügt, aber nur die erste Kategorie angezeigt. Wenn Sie auf andere Kategorien klicken, werden diese ebenfalls angezeigt.
Ich kann fitBounds dazu bringen, an anderen kleineren Beispielen zu arbeiten, bei denen es nur um das Anpassen von Grenzen bei anfänglicher Belastung geht, aber jetzt möchte ich jedes Mal, wenn ich Markierungen ein- oder ausblenden möchte, fitBounds einsetzen.
Jeder Rat ist willkommen.
function initialize() {
var markers = new Array();
var locations = [
['Ness Country Park', '', 'walking', 54.933402, -7.197418, "/local-activities/specific/ness-country-park"],
['Learmount Forest', '', 'walking', 54.862672, -7.085495, "/local-activities/specific/learmount-forest"],
['Muff Glen', 'Muff Glen Forest is nestled in a valley, just outside Eglinton. ', 'walking', 55.029472, -7.170124, "/local-activities/specific/muff-glen"],
['Banagher Forest', '', 'walking', 54.893855, -7.020693, "/local-activities/specific/banagher-forest"],
['Binevenagh Forest', '', 'walking', 55.083549, -6.901131, "/local-activities/specific/binevenagh-forest"],
['17th Century Walls', '', 'explore', 54.997666, -7.319770, "/local-activities/specific/17th-century-walls"],
['Apprentice Boys Memorial Hall', '', 'explore', 54.995339, -7.323890, "/local-activities/specific/apprentice-boys-memorial-hall"],
['The Bogside Artists', '', 'explore', 54.998466, -7.325177, "/local-activities/specific/the-bogside-artists"],
['Foyle Valley Railway Museum', '', 'explore', 54.991154, -7.321572, "/local-activities/specific/foyle-valley-railway-museum"],
['Gasyard Heritage Centre', '', 'explore', 54.989923, -7.333674, "/local-activities/specific/gasyard-heritage-centre"],
['The Guildhall', '', 'explore', 54.996053, -7.320800, "/local-activities/specific/the-guildhall"],
['Harbour Museum', '', 'explore', 54.998269, -7.319427, "/local-activities/specific/harbour-museum"],
['Museum of Free Derry', '', 'explore', 54.997099, -7.326121, "/local-activities/specific/museum-of-free-derry"],
['Riverwatch Aquarium and Visitor Centre', '', 'explore', 54.988950, -7.317538, "/local-activities/specific/riverwatch-aquarium-and-visitor-centre"],
['St Augustines Church', '', 'explore', 54.994736, -7.324040, "/local-activities/specific/st-augustines-church"],
['St Columbs Cathedral', '', 'explore', 54.994564, -7.322345, "/local-activities/specific/st-columbs-cathedral"],
['St Columbas Church Tower', '', 'explore', 55.010132, -7.330992, "/local-activities/specific/st-columbas-church-tower"],
['Tower Museum', '', 'explore', 54.997112, -7.320328, "/local-activities/specific/tower-museum"],
['Workhouse Museum', '', 'explore', 54.994995, -7.305071, "/local-activities/specific/workhouse-museum"],
['Hezlett House', '', 'explore', 55.161697, -6.787148, "/local-activities/specific/hezlett-house"],
['Mussenden Temple & Downhill Demense', '', 'explore', 55.166404, -6.819849, "/local-activities/specific/mussenden-temple-and-downhill-demense"],
['Springhill House', '', 'explore', 54.685615, -6.656857, "/local-activities/specific/springhill-house"],
['Fort Dunree', '', 'explore', 55.196691, -7.547607, "/local-activities/specific/fort-dunree"],
['Barron Top Fun Farm', '', 'explore', 54.856497, -7.335434, "/local-activities/specific/barron-top-fun-farm"],
['Ulster American Folk Park', '', 'explore', 54.587973, -7.377191, "/local-activities/specific/ulster-american-folk-park"],
['Wellbrook Beetling Mill', '', 'explore', 54.651366, -6.836071, "/local-activities/specific/wellbrook-beetling-mill"],
['Claudy Country Park', '', 'cycling', 54.911868, -7.151756, "/local-activities/specific/claudy-country-park"],
['Faughan Valley Cycle Route', '', 'cycling', 54.981797, -7.337022, "/local-activities/specific/faughan-valley-cycle-route"],
['Foyle Valley Cycle Route ', '', 'cycling', 55.001530, -7.321208, "/local-activities/specific/foyle-valley-cycle-route-"],
['Royal Portrush Golf Club', '', 'golfing', 55.199823, -6.634820, "/local-activities/specific/royal-portrush-golf-club"],
['Porstewart Golf Club', '', 'golfing', 55.172149, -6.724534, "/local-activities/specific/porstewart-golf-club"],
['Castlerock Golf Club ', '', 'golfing', 55.165945, -6.785645, "/local-activities/specific/castlerock-golf-club-"],
['Cregan Country Park', '', 'family', 54.999841, -7.343888, "/local-activities/specific/cregan-country-park"],
['Riverwatch Aquarium', '', 'family', 54.988852, -7.317495, "/local-activities/specific/riverwatch-aquarium"],
['Far & Wild Adventure Activities', '', 'family', 55.048369, -7.276855, "/local-activities/specific/far-and-wild-adventure-activities"],
['Brunswick Cinebowl', '', 'family', 55.013008, -7.324448, "/local-activities/specific/brunswick-cinebowl"],
['Campsie Karting', '', 'family', 55.036076, -7.196903, "/local-activities/specific/campsie-karting"],
['Barron Top Fun Farm', '', 'family', 54.856497, -7.335434, "/local-activities/specific/barron-top-fun-farm-1"],
['Ulster American Folk Park', '', 'family', 54.587973, -7.377191, "/local-activities/specific/ulster-american-folk-park-1"],
['Giants Causeway', '', 'family', 55.233317, -6.518154, "/local-activities/specific/giants-causeway"],
['Carick-a-Rede Rope Bridge', '', 'family', 55.237282, -6.351643, "/local-activities/specific/carick-a-rede-rope-bridge"],
['Mussenden Temple', '', 'family', 55.165410, -6.818218, "/local-activities/specific/mussenden-temple"]
];
//Set up Google Map
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 15,
center: new google.maps.LatLng(55.013431, -7.314148),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//InfoBox will be used so InfoWindow is not needed
//var infowindow = new google.maps.InfoWindow();
//Set shadow options
var shadow = new google.maps.MarkerImage('images/marker-shadow.png',
new google.maps.Size(77.0, 62.0),
new google.maps.Point(0, 0),
new google.maps.Point(22.0, 62.0)
);
var marker, i;
for ( var i = 0; i < locations.length; i++ ) {
console.log(locations[i][3], locations[i][4]);
}
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][3], locations[i][4]),
map: map,
shadow: shadow,
icon: 'images/map_'+locations[i][2]+'_image.png'
});
markers.push(marker);
//Create div for InfoBox content
var boxText = document.createElement("div");
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function () {
//Style InfoBox content
boxText.style.cssText = "border: none 0; margin-top: 8px; background:#fff; padding: 8px;border:1px solid #877856;";
boxText.innerHTML = locations[i][0]+"<br />"+locations[i][2]+"<br />"+locations[i][1]+"<img src='images/tipbox.png' class='infobox-arrow' />";
//Remove close box bug fix
$(".infobox-close").remove();
//Set InfoBox options
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, -180)
,zIndex: null
,boxStyle: {
opacity: 1
,width: "280px"
}
,closeBoxMargin: "12px 7px 0 0"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
//Move map to center on marker
map.setCenter(marker.getPosition());
//Attach info box to relevant marker
var ib = new InfoBox(myOptions);
ib.open(map, marker);
//Close InfoBox when map tiles are clicked
$("canvas").click(function () {
ib.close(map, marker);
});
}
})(marker, i));
};
//shows all markers of a particular category, and ensures the checkbox is checked
function show(category) {
for (var i=0; i<locations.length; i++) {
if (locations[i][2] == category) {
markers[i].setVisible(true);
}
}
}
//hides all markers of a particular category, and ensures the checkbox is cleared
function hide(category) {
for (var i=0; i<locations.length; i++) {
if (locations[i][2] == category) {
markers[i].setVisible(false);
}
}
}
//show or hide the categories initially
show("walking");
hide("golfing");
hide("family");
hide("explore");
hide("cycling");
//Show/Hide category markers
$("#activities .checkbox").click(function(){
var cat = $(this).attr("value");
// If checked
if ($(this).is(":checked"))
{
show(cat);
}
else
{
hide(cat);
}
});
};
//Execute function onload
window.load = initialize();