Sie können eine benutzerdefinierte Google Map mit einer Bild-Overlay mit Google Maps API Version 3 . Zum Beispiel können Sie eine Kontur USGS Karte über ein vorhandenes Google- Karte zu überlagern , um eine detaillierte Wanderkarte für Ihre Website-Besucher zu generieren. Nutzen Sie die Google Maps " OverlayView " Klasse Bild-Overlays zur Karte hinzufügen . Anleitung
1

Öffnen Sie Ihre HTML-Datei , und suchen Sie den Abschnitt mit Ihren Google Maps -Code.
2

Erstellen Sie eine globale Variable namens " Overlay " , indem Sie den folgenden in Ihrem Code oben , wo Sie Ihre Karte initialisieren :

var Overlay;
3

Suchen Sie Ihre Karte die " initialize " Funktion und fügen Sie eine Variable, die den Pfad für das Overlay-Bild -Datei :

var imageSource = ' Grafik /map_hiking.jpg ';
4

Definieren Sie die Overlay globale Variable . Zum Beispiel , Typ : .

Overlay = new HikingOverlay ( Grenzen, srcImage , Karte) ;

Das Overlay variable ruft eine " HikingOverlay " -Funktion, die die Parameter enthält für die Bild-Overlay
5

erstellen Sie die Funktion für das Overlay-Bild . In diesem Beispiel wird die Funktion " HikingOverlay ":

Funktion HikingOverlay ( Grenzen, srcImage , Karte)
6

initialisieren die Grenzen , Bildquelle und Karte Eigenschaften für das Wandern Overlay -Funktion.
7

erstellen Sie eine Unterklasse für die HikingOverlay Funktion . Verwenden Sie eine Unterklasse , so dass Sie nicht überschreiben die Attribute der übergeordneten Klasse . Geben Sie z. B. :

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

Befestigen Sie den Overlay mit den Scheiben in der Google Maps -Fenster. Sie können HTML " div "-Elemente exakt positionieren das Overlay oder einfach hängen Sie es an eine Scheibe , wenn das Overlay deckt die gesamte Karte . Erstellen Sie zum Beispiel die Teilung und befestigen Sie die Karte mit der Scheibe durch Eingabe von:

HikingOverlay.sub.onAdd = function () { var

Teilung = document.createElement ( ' DIV ');

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

sub_div = div ;

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

9

Platz das Overlay über die Karte mit dem " draw "-Methode. Geben Sie z. B. :

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

Konvertieren Sie die Bildprojektion von Breiten-und Längengrade Koordinaten von Pixeln für die Platzierung in der Div . Geben Sie z. B. :

var NW = overlayProjection.fromLatLngToDivPixel ( this.bounds_.getNorthWest ());
11

Geben Sie die Abmessungen des div style , um das Bild zu passen. Geben Sie z. B. :

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

Speichern Sie die Datei und testen Sie es . Google zeigt das Bild über das bestehende Google-Karte . Wird das Bild nicht richtig positioniert ist , geben zusätzliche Positionierungskoordinaten Ihren Code genau platzieren Sie das Bild.