如何自訂 Google 地圖 InfoWindow 簡報？

自訂 Google 地圖 InfoWindow 示範

由於文件有限，在 Google 地圖中設計 InfoWindow 的樣式可能會帶來挑戰。幸運的是，有許多方法可以實現所需的自訂：

InfoBubble 類別

Google 提供 InfoBubble 類別作為 InfoWindow 的替代方案。 InfoBubble 具有高度的樣式化功能，可讓您透過 backgroundColor、borderRadius 和 arrowStyle 等屬性自訂其外觀。以下是一個範例：

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();

資訊視窗自訂(OverlayView)

另一種方法是擴充Google Maps API 的GOverlay 類別並將其用作客製化資訊視窗。此方法提供了更大的靈活性，並且需要實作createElement、draw 和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();

請注意，需要重寫所需的方法才能使用此方法建立功能齊全的自訂資訊視窗。

使用 JavaScript 修改 InfoWindow 元素

您也可以使用 JavaScript（或 jQuery）動態修改 InfoWindow 的元素。透過操作資訊視窗中的元素，您可以實現一定程度的自訂。

以上是如何自訂 Google 地圖 InfoWindow 簡報？的詳細內容。更多資訊請關注PHP中文網其他相關文章！