Markörer (Svenska)
Inledning
En markör identifierar en plats på en karta. Som standard använder en markör en standardbild. Markörer kan visa anpassade bilder, i vilket fall de vanligtvis kallas ”ikoner”. Markörer och ikoner är objekt av typen Marker
. Du kan ställa in en anpassad ikon i markörens konstruktör eller genom att ringa setIcon()
på markören. Se mer om hur du anpassar markörbilden nedan.
I stort sett , markörer är en typ av överlägg. För information om andra typer av överlägg, se Rita på kartan.
Markörer är utformade för att vara interaktiva. Som standard får de till exempel "click"
händelser, så att du kan lägga till en händelselyssnare för att visa ett informationsfönster som visar anpassad information. Du kan låta användare flytta en markör på kartan genom att ställa in markören ”s draggable
egenskap till true
. För mer information om dragbara markörer, se nedan.
Lägg till en markör
google.maps.Marker
-konstruktören tar en enda Marker options
bokstavligt objekt, som anger de ursprungliga egenskaperna för markören.
Följande fält är särskilt viktiga och ställs ofta in när man konstruerar en markör:
-
position
(obligatoriskt) anger enLatLng
som identifierar markörens initialallokering. Ett sätt att hämta enLatLng
är att använda Geocoding-tjänsten. -
map
(valfritt) angerMap
som markören ska placeras på. Om du inte anger kartan på markörens konstruktion skapas markören men är inte kopplad till (eller visas på) kartan. Du kan lägga till markören senare genom att ringa markören ”ssetMap()
-metoden.
Följande exempel lägger till en enkel markör på en karta i Uluru, i centrala Australien:
I exemplet ovan är markören placeras på kartan vid markeringens konstruktion med egenskapen map
i markeringsalternativen. Alternativt kan du lägga till markören på kartan direkt med markören ”s setMap()
-metod, som visas i exemplet nedan:
Markören ”s title
visas som en verktygstips.
Om du inte vill skicka någon Marker options
i markörens konstruktör, skicka istället ett tomt objekt {}
i det sista konstruktörens argument.
Visa exempel
Ta bort en markör
För att ta bort en markör från kartan, ring setMap()
metod som skickar null
som argument.
marker.setMap(null);
Observera att ovanstående metoden tar inte bort markören. Det tar bort markören från kartan. Om du istället vill ta bort markören bör du ta bort den från kartan och sedan ställa in markören på null
.
Om du vill hantera en uppsättning markörer bör du skapa en matris för att hålla markörerna. Med den här matrisen kan du sedan ringa setMap()
på varje markör i matrisen i tur och ordning när du behöver ta bort markörerna. Du kan radera markörerna genom att ta bort dem från kartan och sedan ställa in matrisen ”s length
till 0
, vilket tar bort alla referenser till markörer.
Visa exempel
Animera en markör
Du kan animera markörer så att de uppvisar dynamisk rörelse under en mängd olika omständigheter. markören är animerad, använd markören ”s animation
egenskap, av typen google.maps.Animation
. Följande Animation
-värden stöds:
-
DROP
indikerar att markören ska falla från toppen av kartan till dess slutliga plats när den först placeras på kartan. Animeringen upphör när markören vilar ochanimation
återgår tillnull
. Denna typ av animering anges vanligtvis under skapandet avMarker
. -
BOUNCE
indikerar att markören ska studsa in plats. En studsande markör fortsätter att studsa tills dessanimation
-egenskapen är uttryckligen inställd pånull
.
Du kan initiera en animering på en befintlig markör genom att anropa setAnimation()
på Marker
-objektet.
Om du har många markörer , kanske du inte vill släppa dem på kartan på en gång. Du kan använda setTimeout()
för att placera dina markörers animationer med ett mönster som visas nedan:
function drop() { for (var i =0; i markerArray.length; i++) { setTimeout(function() { addMarkerMethod(); }, i * 200); }}
Visa exempel
Anpassa en markörbild
Om du vill visa en bokstav eller ett nummer på en markör kan du använda en marköretikett.Om du behöver större anpassning kan du definiera en ikon som ska visas istället för standardmarkörbilden. Att definiera en ikon innebär att man ställer in ett antal egenskaper som bestämmer markörens visuella beteende.
Avsnitten nedan beskriver marköretiketter, enkla ikoner, komplexa ikoner och symboler (vektorikoner).
Marköretiketter
En marköretikett är en bokstav eller ett tal som visas inuti en markör. Markörbilden i detta avsnitt visar en marköretikett med bokstaven ”B”. Du kan ange en marköretikett som antingen en sträng eller ett MarkerLabel
-objekt som innehåller en sträng och andra etikettegenskaper.
När du skapar en markör kan du ange en label
egenskap i MarkerOptions
-objektet. Alternativt kan du ringa setLabel()
på markörobjektet för att ställa in etiketten på en befintlig markör.
Följande exempel visar märkta markörer när användaren klickar på kartan :
Enkla ikoner
I det mest grundläggande fallet kan en ikon indikera en bild som ska användas istället för standardnätikonen för Google Maps. För att ange en sådan ikon ställer du in markörens ”s icon
-egenskap till webbadressen för en bild. Maps JavaScript API kommer att storleksställa ikonen automatiskt.
Komplexa ikoner
Du kanske vill ange komplexa former för att indikera regioner som är klickbara och ange hur ikonerna ska visas i förhållande till andra överlägg (deras ”stack-ordning”). Ikoner som anges på detta sätt ska ställa in deras icon
egenskaper för ett objekt av typen Icon
.
Icon
objekt definierar en bild. De definierar också size
för ikonen, origin
för ikonen (om bilden du vill är en del av en större bild i en sprite, till exempel) och anchor
där ikonens hotspot ska placeras (som baseras på ursprunget).
Om du använder en etikett med en anpassad markör kan du placera etiketten med labelOrigin
egenskapen i -objekt.
Konvertera MarkerImage
objekt till typ Icon
Fram till version 3.10 av Maps JavaScript API definierades komplexa ikoner som MarkerImage
-objekt. Icon
objektlitteratur lades till i version 3.10 och ersätter MarkerImage
från version 3.11 och framåt. Icon
objektbokstäver stöder samma parametrar som MarkerImage
, så att du enkelt kan konvertera en MarkerImage
till en Icon
genom att ta bort konstruktorn, slå in de tidigare parametrarna i {}
”s och lägga till namnen på varje parameter. Till exempel:
blir
Symboler
Förutom rasterbilder stöder en markör visning av vektorsökvägar som heter Symbols
För att visa en vektorsökväg, skicka ett Symbol
bokstavligt objekt med önskad sökväg till markörens ”s icon
-egenskap. Du kan använda en av de fördefinierade sökvägarna i google.maps.SymbolPath eller definiera en anpassad sökväg med SVG-sökväg.
Mer information finns i dokumentationen för symboler.
Skapa en markör dragbar
För att låta användare dra en markör till en annan plats på kartan, ställ in draggable
till true
i marköralternativen.
Ytterligare marköranpassning
För en helt anpassad markör, se det anpassade popup-exemplet.