Come aggiungere una sovrapposizione di immagini Con Mappe API V3

December 1

È possibile creare un personalizzato di Google Map con una sovrapposizione di immagini utilizzando Google Maps API Versione 3. Ad esempio, è possibile sovrapporre una mappa di contorno USGS su una mappa di Google esistente per generare una mappa dettagliata sentiero per i visitatori del tuo sito. Utilizzare il "OverlayView" classe Google Maps per aggiungere sovrapposizioni di immagini alla mappa.

istruzione

1 Aprire il file HTML e individuare la sezione contenente il codice di Google Maps.

2 Creare una variabile globale chiamata "overlay" digitando la seguente nel codice sopra dove si inizializza la vostra mappa:

var overlay;

3 Individuare la funzione della vostra mappa "inizializzare" e aggiungere una variabile che contiene il percorso del file di immagine di sovrapposizione:

var ImageSource = 'grafica / map_hiking.jpg';

4 Definire la variabile globale di sovrapposizione. Ad esempio, digitare:

overlay = new HikingOverlay (limiti, srcImage, carta);

La variabile di sovrapposizione chiama una funzione "HikingOverlay", che contiene i parametri per la sovrapposizione di immagini.

5 Creare la funzione per la sovrapposizione di immagini. In questo esempio, la funzione è chiamata "HikingOverlay":

Funzione HikingOverlay (limiti, srcImage, mappa)

6 Inizializzare i limiti, fonte di immagini e mappa le proprietà per la funzione di escursionismo Overlay.

7 Creare una sottoclasse per la funzione HikingOverlay. Utilizzare una sottoclasse in modo da non sovrascrivere gli attributi della classe genitore. Ad esempio, digitare:

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

8 Fissare la sovrapposizione per i vetri della finestra di Google Maps. È possibile utilizzare elementi HTML "div" per posizionare con precisione la sovrapposizione o semplicemente collegarlo a un riquadro se la sovrapposizione copre l'intera mappa. Ad esempio, creare la divisione e fissare la mappa per il riquadro digitando:

HikingOverlay.sub.onAdd = function () {

var divisione = document.createElement ( 'DIV');

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

sub_div = div;

var = riquadri this.getpanes ();
panes.overlayLayer.appendChild (div);

}

9 Posizionare la sovrapposizione sulla mappa utilizzando il metodo del "disegnare". Ad esempio, digitare:

HikingOverlay.sub.draw = Funzione () {
var = overlayProjection this.getProjection ();
}

10 Convertire la proiezione di immagini da latitudine e longitudine di pixel per il posizionamento nel div. Ad esempio, digitare:

var = NORTHWEST overlayProjection.fromLatLngToDivPixel (this.bounds_.getNorthWest ());

11 Specificare le dimensioni dello stile div per adattare l'immagine. Ad esempio, digitare:

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

12 Salvare il file e provarlo. Google visualizza l'immagine sopra la mappa Google esistente. Se l'immagine non è posizionata correttamente, specificare il posizionamento ulteriore coordinate il codice per posizionare con precisione l'immagine.