Hvordan legge til et bildeoverlegg Med V3 Maps API

Du kan opprette en egendefinert Google Map med et bildeoverlegg ved hjelp av Google Maps API versjon 3. For eksempel kan du tegne en USGS kontur kart over en eksisterende Google kart for å generere en detaljert tursti kartet for ditt nettsted besøkende. Bruk Google Maps "OverlayView" class å legge bildeoverlegg på kartet.

Bruksanvisning

1 Åpne HTML-fil og finn avsnittet inneholder Google Maps-kode.

2 Lag en global variabel kalt "overlay" ved å skrive følgende i koden over der du initial kartet ditt:

Var overlegg;

3 Finn din kartets "initialisere" -funksjonen og legge til en variabel som inneholder banen for overleggsbildefilen:

Var imageSource = 'grafikk / map_hiking.jpg';

4 Definer overlegg global variabel. For eksempel inn:

overlay = ny HikingOverlay (grenser, srcImage, kart);

Den overlegg variable kaller en "HikingOverlay" -funksjon, som inneholder parametere for bildeoverlegget.

5 Lag funksjonen for overleggsbildet. I dette eksempel er funksjonen kalles "HikingOverlay":

funksjon HikingOverlay (grenser, srcImage, kart)

6 Initial grensene, bildekilde og kart egenskaper for Vandring Overlay funksjon.

7 Lag en underklasse for HikingOverlay funksjon. Bruk en underklasse, slik at du ikke overskriver attributtene til den overordnede klassen. For eksempel inn:

HikingOverlay.sub = new google.maps.OverlayView ();

8 Fest overlegg til rutene i Google Maps vinduet. Du kan bruke HTML "div" elementer til nettopp plassere overlegg eller bare fest den til en rute om overlegget dekker hele kartet. For eksempel lage divisjonen og fest kartet til ruten ved å skrive:

HikingOverlay.sub.onAdd = function () {

Var divisjon = document.createElement ( 'DIV');

Var img = document.create.Element ( "img");
div.appendChild (img);

sub_div = div;

Var ruter = this.getpanes ();
panes.overlayLayer.appendChild (div);

}

9 Plasser overlay over kartet ved hjelp av "tegne" metoden. For eksempel inn:

HikingOverlay.sub.draw = funksjon funksjon () {
Var overlayProjection = this.getProjection ();
}

10 Konverter bildet projeksjon fra lengde- og breddegrader til piksler for plassering i div. For eksempel inn:

Var nordvest = overlayProjection.fromLatLngToDivPixel (this.bounds_.getNorthWest ());

11 Angi dimensjonene av div style å tilpasse bildet. For eksempel inn:

Var div = this.div_;
div.style.left = northWest.x + 'px';

12 Lagre filen og teste den. Google viser bildet ditt over din eksisterende Google-kartet. Hvis bildet ikke er riktig plassert, spesifisere ytterligere posisjonering koordinater til koden til nettopp plassere bildet.