Ako pridať obrázok šablónu s V3 Maps API

Môžete si vytvoriť vlastný Google Map s prekrytím obrazu pomocou Google Maps API verzie 3. Napríklad , môžete prekryť USGS obrysu mapy cez existujúce mapy Google vygenerovať podrobnú turistickú mapu cesty pre vaše webové stránky návštevníkov . Pomocou Google Maps " OverlayView " triedy pre pridanie prekryvných obrázkov na vašej mape . Pokyny dovolená 1

Otvorte svoj ​​súbor HTML a vyhľadajte časť obsahujúca vaše Google Maps kód .
2

Vytvoriť globálne premennú s názvom " prekrytie " zadaním nasledujúceho vo vašej vyššie uvedený kód , kde sa inicializovať svoju mapu :

var šablónou ;
3

Vyhľadajte funkciu vašej mape je " inicializovať " a pridať premennú obsahujúci cestu k súboru prekrytie obrazu :

var ImageSource = ' grafika /map_hiking.jpg " ;
4

Definovať prekrývanie globálne premenné . Napríklad typ :

prekrytie = new HikingOverlay ( medze , srcImage , mapa ) ,

Premenná prekrytie volá funkciu " HikingOverlay " , ktorý obsahuje parametre pre prekrytia obrázku < . br >
5

Vytvorte funkciu pre prekrývanie obrazu . V tomto príklade funkcia sa nazýva " HikingOverlay " :

funkcie HikingOverlay ( medze , srcImage , mapa )
6

inicializovať hranice , zdroj obrazu a mapové vlastnosti pre Turistika overlay funkcie .
7

vytvoriť podtriedu pre funkciu HikingOverlay . Použite podtriedy , takže nemusíte prepísať atribúty nadradenej triedy . Napríklad typ :

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

Pripevnite šablónu , do tably v okne aplikácie Mapy Google . Môžete použiť HTML " div " prvky presne umiestniť šablónu alebo jednoducho pripojiť k jednej časti , ak je prekrytie pokrýva celú mapu . Môžete napríklad vytvoriť rozdelenie a pripojte mapy do panela zadaním :

HikingOverlay.sub.onAdd = function ( ) { var

dielik = document.createElement ( " DIV " ) ;

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

sub_div = div ;

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

}
9

Umiestnite šablónu na mape pomocou metódy " kresliť " . Napríklad typ :

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

Prevod obrazu projekciu z šírky a dĺžky súradníc bodov za umiestnenie v div . Napríklad typ :

var severozápad = overlayProjection.fromLatLngToDivPixel ( this.bounds_.getNorthWest ( ) ) ;
11

Zadajte rozmery štýlu div , aby sa vošli na obrázku . Napríklad typ :

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

Uložte súbor a vyskúšať . Google zobrazuje na disk cez existujúce mapy Google . Ak obraz nie je správne umiestnená , uveďte ďalšie umiestnenia súradníc do kódu presne umiestniť obraz .

• Predchádzajúca strana: Ako zarobiť viac značiek s mapami API 
• Ďalšia strana: Ako používať Google Maps API pre Auto Complete Poloha Pole