wie man eine Auffüllung um den Rand einer Google-Karte erstellt

Question

Ich habe eine sehr belebte Google Maps-App, die ich erstellt habe, und ich versuche, eine "Pufferzone" um den äußeren Rand der Karte zu erstellen, damit die Google Maps-Befehle dort keine Dinge einfügen. Meine Lösung bestand darin, unsichtbare Divs zu erstellen und sie der Karte als Steuerelemente hinzuzufügen, eines für jeden der Ränder. Dies scheint gut zu funktionieren, da alle Google-Befehle sie sehen und entsprechend anpassen, und die Karte erscheint normal. Zum Beispiel stellt fitBounds sicher, dass meine Grenzen nicht unter den unsichtbaren Ebenen liegen. Für die Oberseite, wo ich eine Steuerleiste ist es eine perfekte Lösung, aber für die anderen Kanten, wo es nichts, es schafft ein Problem - ich kann nicht auf die Karte oder Info Windows unter diesen Steuerelementen klicken, da sie das Klick-Ereignis zu nehmen.

Ich suche also nach einer von 2 Lösungen: 1) kann ich meine unsichtbaren Steuerelemente Klicks an die Karte weiterleiten, oder; 2) gibt es einen besseren Weg, um den Rand der Karte aufzufüllen; etwas, das nicht eine Menge von Mathematik jedes Mal, wenn ich eine fitBounds oder panTo aufrufen möchten, wäre bevorzugt, wie ich eine Menge von Karte Bewegung automatisieren

Prost

Answer 1

Es ist mir gelungen, dieses Problem zu lösen.

Am besten lassen sich Ihre Maps mit unsichtbaren Steuerelementen aufpolstern. Sie erzeugen die Füllung, die alle anderen Kartenfunktionen ohne zusätzlichen Code beim Aufruf befolgen. Hier ist eine Anleitung für alle, die dies benötigen. Zuerst Ich erstelle eine Funktion, um die Erstellung der Divs zu vereinfachen.

function createDummyDiv(w, h){
    var out = $(document.createElement('div')).addClass('dummy-div').css('width', w).css('height', h);
    return out[0];
}

Dann füge ich die Steuerelemente nach Bedarf hinzu. In diesem Fall habe ich das normale Zoom-Steuerelement in der Position LEFT_CENTER, also musste ich 2 für die linke Seite erstellen. Dies schafft eine 10% Polsterung auf der linken, rechten und unteren, und eine 55px Polsterung an der Spitze unter meinem eigenen Kontrollleiste.

map.controls[google.maps.ControlPosition.TOP_CENTER].push(createDummyDiv('100%', '55px'));
map.controls[google.maps.ControlPosition.LEFT_TOP].push(createDummyDiv('10%', '45%'));
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(createDummyDiv('10%', '45%'));
map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(createDummyDiv('10%', '100%'));
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(createDummyDiv('100%', '10%'));

Die endgültige Lösung für mein Problem besteht darin, sie mit CSS hinter die Kartenebene zu setzen.

.dummy-div{ z-index: -100 !important; }

Ich hoffe, dies hilft jemand anderem

Answer 2

Versuchen Sie, dem unsichtbaren DIV einen negativen z-Index zu geben, z. B. -10.

Answer 3

Für mich, fitBounds api arbeitete selbst mit zweiten Parameter (padding)

Polsterung der Grenzen der Google-Karte hinzufügen