Wie kann ich die InfoWindow-Präsentation von Google Maps anpassen?

Anpassen der Google Maps-InfoWindow-Präsentation

Das Gestalten eines InfoWindows in Google Maps kann aufgrund der begrenzten Dokumentation eine Herausforderung darstellen. Glücklicherweise gibt es verschiedene Ansätze, um die gewünschte Anpassung zu erreichen:

InfoBubble-Klasse

Google bietet die InfoBubble-Klasse als Alternative zu InfoWindow an. InfoBubble lässt sich in hohem Maße stilisieren, sodass Sie sein Erscheinungsbild mithilfe von Eigenschaften wie „backgroundColor“, „borderRadius“ und „arrowStyle“ anpassen können. Hier ist ein Beispiel:

infoBubble = new InfoBubble({
  map: map,
  content: '<div class="mylabel">The label</div>',
  position: new google.maps.LatLng(-32.0, 149.0),
  backgroundColor: 'rgb(57,57,57)',
  borderRadius: 5,
  arrowSize: 10
});

infoBubble.open();

Info Window Custom (OverlayView)

Ein anderer Ansatz besteht darin, die GOverlay-Klasse der Google Maps API zu erweitern und sie als Grundlage für ein zu verwenden individuelles Infofenster. Diese Methode bietet mehr Flexibilität und erfordert die Implementierung von Methoden wie createElement, draw und panMap:

/* An InfoBox is like an info window, but it displays
 * under the marker, opens quicker, and has flexible styling.
 */
function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  this.latlng_ = opts.latlng;
  this.map_ = opts.map;
  ...
}

InfoBox.prototype = new google.maps.OverlayView();

Beachten Sie, dass das Überschreiben der erforderlichen Methoden erforderlich ist, um mit diesem Ansatz ein voll funktionsfähiges benutzerdefiniertes Infofenster zu erstellen.

InfoWindow-Elemente mit JavaScript ändern

Sie können die Elemente des InfoWindow auch dynamisch mit JavaScript (oder jQuery) ändern. Durch die Bearbeitung von Elementen im InfoWindow können Sie einen gewissen Grad an Anpassung erreichen.

Das obige ist der detaillierte Inhalt vonWie kann ich die InfoWindow-Präsentation von Google Maps anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!