Du kan skapa en anpassad Google Map med en bild overlay med hjälp av Google Maps API version 3 . Till exempel , kan du överlagra en USGS kontur karta över ett befintligt Google kartan för att generera en detaljerad karta vandringsled för dina besökare . Använd Google Maps " OverlayView " klass för att lägga vybilder till din karta . Instruktioner
1
Öppna din HTML-fil och leta upp avsnittet innehåller din Google Maps -kod .
2
Skapa en global variabel som heter " overlay " genom att skriva in följande i din koden ovan där du initierar din karta :
var overlay ,
3
Lokalisera din karta : s " initiera " -funktionen och lägger till en variabel innehåller sökvägen till overlay bildfil :
var imageSource = ' graphics /map_hiking.jpg ' ;
4
Definiera överlagring globala variabeln . Till exempel , typ : .
Overlay = ny HikingOverlay ( gränser , srcImage , karta ) ,
overlay variabeln kallar en " HikingOverlay " -funktion , som innehåller parametrarna för bildöverlägg
5
Skapa funktion för överlägg bild . I detta exempel är den funktion som kallas " HikingOverlay " :
funktion HikingOverlay ( gränser , srcImage , map )
6
Initiera gränserna , bildkälla och egenskaper karta för vandring Overlay funktionen .
7
Skapa en underklass för HikingOverlay funktionen . Använd en underklass så att du inte skriver över attributen för den överordnade klassen . Till exempel , typ :
HikingOverlay.sub = ny google.maps.OverlayView ( ) ;
8
Fäst överlägget till glasen i Google Maps fönstret . Du kan använda HTML " div " element för att exakt positionera overlay eller helt enkelt koppla den till en ruta om överlägget täcker hela kartan . Till exempel , skapa splittring och bifoga en karta till rutan genom att skriva:
HikingOverlay.sub.onAdd = function ( ) {
var division = document.createElement ( ' DIV ' ) ;
var img = document.create.Element ( " img " ) ; div.appendChild ( IMG ) ,
sub_div = div ;
var- rutor = this.getpanes ( ) ; panes.overlayLayer.appendChild ( div ) ;
}
9
Placera overlay över kartan med hjälp av " draw " metoden . Till exempel , typ :
HikingOverlay.sub.draw = function function ( ) {var overlayProjection = this.getProjection ( ) ;}
10
Konvertera bilden projektion från latitud och longitud koordinater till pixlar för placering i div . Till exempel , typ :
var Northwest = overlayProjection.fromLatLngToDivPixel ( this.bounds_.getNorthWest ( ) ) ;
11
Ange måtten på div style att passa bilden . Till exempel , typ :
var div = this.div_ ; div.style.left = northWest.x + ' px ' ;
12
Spara filen och testa den . Google visar din bild över ditt befintliga Google map . Om bilden inte är korrekt placerad , ange ytterligare positionering koordinaterna till din kod för att exakt placera bilden .
