Hold markøren Funksjoner på Google Map

Markører er små røde ikoner som markerer viktige steder på Google maps. Ved å klikke på en markør ofte åpner et vindu som viser nyttig informasjon om stedet under markøren. Hvis web-applikasjon bruker Googles Application Programming Interface for å vise kart, kan du lage en funksjon som gjør at et informasjonsvindu vises når musen svever over en markør.

Legge til en markør

Markører på et Google-kart flytte sammen med kartet når du drar det for å vise forskjellige steder. Følgende kode oppretter en LatLng objekt som lar deg legge til en markør for å kartlegge: oppkalt map1:

Var LatLng1 = ny google.maps.LatLng (37,97, 121,81);

Tallene 37.97 og 121.81 representerer breddegrad og lengdegrad for stedet der du ønsker å plassere markøren. Koden nedenfor skaper en markør på det stedet.

Var marker1 = ny google.maps.Marker ({
posisjoner: LatLng1,
title: "Marker1!"
});

marker1.setMap (map1);

Hvis variabelen som inneholder en referanse til kartet ditt har et annet navn, erstatte "map1" med det navnet.

mouse Hendelser

Hendelsen lyttere gjør det mulig for objekter på en webside for å svare når handlinger oppstår. Beveg musen over et bilde på en vanlig webside, for eksempel, og en mouse hendelse kan føre til at bildet for å forstørre. Google Application Programming Interface kommer wtih GEvent.addDomListener, en hendelse lytteren som lar deg legge til hover evner til kartene dine. For å få en markør for å vise sin informasjonsvinduet, skape et informasjonsvindu og legge ved en mouse hendelse lytteren til markør.

Hendelse lytteren kode

Koden vises her skaper en ny informasjons vindu objekt kalt infowindow1. Dens dimensjoner, som du kan endre, er 60 piksler bred og 70 piksler høy. Koden vist oppretter en ny informasjon vindu objekt kalt infowindow1, hvis bredden er 60 piksler og høyden er 70 piksler.

Var infowindow1 = new google.maps.InfoWindow (
{Innhold: "Marker1 Info",
størrelse: ny google.maps.Size (60, 70)
});

Legg til følgende hendelseshåndterere etter denne koden, og søknaden er klar for å vise informasjonsvinduet når du holder musen over kartet er merket:

google.maps.event.addListener (marker1, 'mouse', function () {
infowindow1.open (map1, marker1);
});
google.maps.event.addListener (marker1, 'mouseout', function () {
infowindow1.close (map1, marker1);
});

betraktninger

De to siste linjene med kode som er oppført i dette eksemplet oppretter også en mouseout hendelse. Dette fører til at informasjonsvinduet til å forsvinne når du beveger musen bort fra markøren. Legg til så mange markører til kartet ditt som du liker og sette dem opp ved hjelp av disse koding teknikker. Hvis informasjonen vinduene er for små til å holde ønsket innhold, gjøre dem større når du oppretter dem. Når du definerer lengde- og breddegrad for LatLng objekt, sikre at disse koordinatene ligge innenfor kartet websiden din vises.