Wie kann ich das Design von Google Maps InfoWindows anpassen?

Styling von Google Maps InfoWindows

Google Maps bietet eine eingeschränkte Anleitung zum Stylen von InfoWindows. In diesem Artikel werden Techniken zum Anpassen dieser Elemente untersucht.

InfoBubble

Mit InfoBubble, einer Alternative zu InfoWindow, können Sie viele Gestaltungsmöglichkeiten erreichen.

infoBubble = new InfoBubble({
  map: map,
  content: '<div class="mylabel">The label</div>',
  position: new google.maps.LatLng(-32.0, 149.0),
  shadowStyle: 1,
  padding: 0,
  backgroundColor: 'rgb(57,57,57)',
  borderRadius: 5,
  arrowSize: 10,
  borderWidth: 1,
  borderColor: '#2c2c2c',
  disableAutoPan: true,
  hideCloseButton: true,
  arrowPosition: 30,
  backgroundClassName: 'transparent',
  arrowStyle: 2
});
infoBubble.open();

Info Window Custom

Dieses Skript erweitert GOverlay und erstellt ein flexibleres und anpassbareres Infofenster.

/* An InfoBox is like an info window, but it displays
 * under the marker, opens quicker, and has flexible styling.
 * @param {GLatLng} latlng Point to place bar at
 * @param {Map} map The map on which to display this InfoBox.
 * @param {Object} opts Passes configuration options - content,
 *   offsetVertical, offsetHorizontal, className, height, width
 */
function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  this.latlng_ = opts.latlng;
  this.map_ = opts.map;
  this.offsetVertical_ = -195;
  this.offsetHorizontal_ = 0;
  this.height_ = 165;
  this.width_ = 266;

  var me = this;
  this.boundsChangedListener_ =
    google.maps.event.addListener(this.map_, "bounds_changed", function() {
      return me.panMap.apply(me);
    });

  // Once the properties of this OverlayView are initialized, set its map so
  // that we can display it.  This will trigger calls to panes_changed and
  // draw.
  this.setMap(this.map_);
}

Beachten Sie, dass Sie möglicherweise mehrere Methoden überschreiben müssen, wenn Sie Info Window Custom verwenden.

Das obige ist der detaillierte Inhalt vonWie kann ich das Design von Google Maps InfoWindows anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!