Temat: problem z markerami
Póki co udało mi się zrobić coś takiego jak w tym przykładzie którego kod wkleiłam poniżej.
Nie jestem zbyt doświadczona w Google API :), może mógłby mnie ktoś naprowadzić w której części powinnam zmieniać, aby jedne markery były odznaczone i niewidoczne.;)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">@import "/style/Przyklad.css";</style>
<title>Przyklad</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body onload="mapaStart()">
<script type='text/javascript'>
var mapa; //obiekt globalny
var dymek = new google.maps.InfoWindow();
var markery = []; // tablica globalna na markery
function mapaStart()
{
var wspolrzedne = new google.maps.LatLng(52.228791729248044, 21.002973318099975);
var opcjeMapy = {
zoom: 17,
center: wspolrzedne,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);
var ikona_rozmiar = new google.maps.Size(32,32);
var ikona_start = new google.maps.Point(0,0);
var ikona_zaczep = new google.maps.Point(16,16);
var ikona_transport = new google.maps.MarkerImage('
', ikona_rozmiar, ikona_start, ikona_zaczep);
var ikona_parkingi = new google.maps.MarkerImage('http://www.google.com/intl/en_ALL/mapfiles/markerP.png', ikona_rozmiar, ikona_start, ikona_zaczep);
// dodajemy seriÄ™ markerĂłw (lat,lon,tytul,opis,kategoria,ikona)
//transportowe
dodajMarker(52.22879830076604, 21.003166437149048, 'PKP', 'tu jest opis', 'transport', ikona_transport);
dodajMarker(52.22945544765169, 21.001224517822265, 'PKS', 'tu jest opis', 'transport', ikona_transport);
dodajMarker(52.22819371704034, 21.003037691116333, 'Przystanek1', 'tu jest opis', 'transport', ikona_transport);
dodajMarker(52.22783227718525, 21.00361704826355, 'Przystanek2', 'tu jest opis', 'transport', ikona_transport);
//parkingi
dodajMarker(52.229048017728424, 21.00459337234497, 'Parking1', 'tu jest opis', 'parkingi', ikona_parkingi);
dodajMarker(52.22855515395304, 21.001986265182495, 'Parking2', 'tu jest opis', 'parkingi', ikona_parkingi);
dodajMarker(52.230322866646965, 21.00484013557434, 'Parking3', 'tu jest opis', 'parkingi', ikona_parkingi);
dodajMarker(52.23143997220241, 21.003413200378418, 'Parking4', 'tu jest opis', 'parkingi', ikona_parkingi);
dodajMarker(52.22812800092191, 21.000677347183227, 'Parking5', 'tu jest opis', 'parkingi', ikona_parkingi);
odswiezSidebar();
}
// ta funkcja jest wywoływana przy kliknięciu na pole checkbox
function przerysuj(checkbox,kategoria)
{
// jeśli kliknięty checkbox jest zaznaczony, to wywołujemy funkcję z parametrem, mówiącym że ma pokazać markery i polilinie
// jeśli kliknięty checkbox nie jest zaznaczony, to wywołujemy funkcję z parametrem, mówiącym że ma ukryć markery i polilinie if(document.getElementById(checkbox).checked)
ukryjPokazKategorie(kategoria,true);
else
ukryjPokazKategorie(kategoria,false);
odswiezSidebar();
}
// ta funkcja generuje zawartość okienka informacyjnego
function zawartoscOkna(tytul,opis)
{
return '<h3>'+tytul+'</h3><p>'+opis+'</p>';
}
// ta funkcja pokazuje lub ukrywa markery lub polilinie danej kategorii, zgodnie z przekazanymi argumentami
function ukryjPokazKategorie(kategoria,pokaz)
{
// kategoria oznacza id kategorii której widzialność trzeba zmienić
// jeśli pokaz = false, to znaczy że mamy ukryć, w przeciwnym wypadku pokazać
// dla kaĹĽdego z markerĂłw
for(var i=0; i<markery.length; i++)
{
// jeśli poszukiwana kategoria jest kategorią markera
if(markery[i].kategoria==kategoria)
{
// to go ukrywamy lub pokazujemy, w zależności od argumetu pokaz
markery[i].setVisible(pokaz);
markery[i].widoczny = pokaz;
}
}
}
// ta funkcja dodaje marker we współrzędnych lat, lon, o tytule: tytul, opisie: opis, kategorii: kategoria, i ikonce z pliku ikona_url
function dodajMarker(lat,lon,tytul,opis,kategoria,ikona)
{
var punkt = new google.maps.LatLng(lat,lon);
var marker = new google.maps.Marker(
{
position: punkt,
icon: ikona,
title: tytul,
map: mapa
});
// przypisujemy markerowi ID kategorii
marker.kategoria = kategoria;
marker.tytul = tytul;
marker.opis = opis;
marker.widoczny = true; // pomocnicza właściwość do rysowania paska bocznego
markery.push(marker);
google.maps.event.addListener(marker,'click',function()
{
dymek.open(mapa,marker);
dymek.setContent(zawartoscOkna(tytul,opis));
});
}
</script>
<table>
<tr>
<td>
<div id="mapka" style="width: 700px; height: 500px; border: 1px solid black; background: gray;">
<!-- tu będzie mapa -->
</div>
</td>
<td style=" width:200px; vertical-align: top;" id="sidebar">
</td>
</tr>
</table>
<div id="kategorieBelka" style="color: #666; font-style: italic;">
<input checked="checked" id="kat1" type="checkbox" onclick="przerysuj('kat1','transport')" /> transport
<input checked="checked" id="kat2" type="checkbox" onclick="przerysuj('kat2','parkingi')" /> parkingi
</div> </body>
</html>
пропозиції роботи
