U kunt een aangepaste Google Map met een overlay-afbeelding met behulp van Google Maps API versie 3 te creëren . Bijvoorbeeld , kunt u een USGS contour kaart overlay over een bestaand Google kaart om een gedetailleerde wandelroute kaart voor bezoekers van uw website te genereren . Gebruik de Google Maps " OverlayView " class om beeldoverlays toevoegen aan uw kaart . Instructies
1 Open uw HTML- bestand en zoek het gedeelte met uw Google Maps code . Kopen van 2 Maak een globale variabele genaamd " overlay " door in je het volgende te typen bovenstaande code waar u uw kaart initialiseren : var overlay
;
3 Locate functie " initialize " uw kaart en voeg een variabele bevat het pad voor de overlay- beeldbestand : var Imagesource =
' graphics /map_hiking.jpg ' ;
4 Definieer de overlay globale variabele . Typ bijvoorbeeld : . Overlay
= new HikingOverlay ( grenzen , srcImage , map ) ;
De overlay variabele een functie " HikingOverlay " , waarin de parameters voor de overlay-afbeelding bevat noemt < br >
5 Maak de functie voor de overlay-afbeelding . In dit voorbeeld wordt de functie genaamd " HikingOverlay " : functie HikingOverlay
( grenzen , srcImage , kaart )
6 Initialiseer de grenzen , beeldbron en map eigenschappen voor het wandelen overlay -functie .
7 Maak een subklasse voor de HikingOverlay functie . Gebruik een subklasse , zodat je niet de attributen van de bovenliggende klasse overschrijven . Typ bijvoorbeeld : HikingOverlay.sub = new google.maps.OverlayView ( ) op ;
8 Bevestig de overlay om de ruiten in het venster Google Maps . U kunt HTML " div " elementen gebruiken om nauwkeurig de positie van de overlay of gewoon bevestigen aan een ruit als de overlay bestrijkt de hele kaart . Maak bijvoorbeeld de divisie en bevestig de kaart om het deelvenster door te typen: HikingOverlay.sub.onAdd = function ( ) { var divisie
= document.createElement ( ' DIV ' ) ; var img = document.create.Element
( " img " ) ; div.appendChild ( img ) ; sub_div = div
; var ruiten
= this.getpanes ( ) ; panes.overlayLayer.appendChild ( div ) ;
}
9 Plaats de overlay over de kaart met behulp van de " draw " -methode . Typ bijvoorbeeld : HikingOverlay.sub.draw = function function ( ) { var
overlayProjection = this.getProjection ( ) ; }
10 Zet het beeld projectie van lengte-en breedtegraad coördinaten naar pixels voor plaatsing in de div . Typ bijvoorbeeld :
var noordwesten = overlayProjection.fromLatLngToDivPixel ( this.bounds_.getNorthWest ( ) ) ;
11 Geef de afmetingen van de div style om het beeld te passen . Typ bijvoorbeeld : var div
= this.div_ ; div.style.left = northWest.x + ' px ' ;
12 Sla uw bestand op en test het . Google geeft uw imago over uw bestaande Google map . Als het beeld niet correct geplaatst is , geeft extra positionering coördinaten aan uw code om precies plaatsen van de afbeelding .
|
