如何自訂 Google 地圖 InfoWindows？

自訂 Google 地圖 InfoWindows

由於可用文件有限，設計 InfoWindow 的樣式可能是一項挑戰。以下是如何修改InfoWindow 外觀的詳細指南：

InfoBubble

一種選擇是使用InfoBubble 庫，它提供了超出功能的廣泛樣式選項的資訊視窗。若要實作InfoBubble，請匯入下列檔案：

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js

如下設定InfoBubble：

infoBubble = new InfoBubble({
  map: map,
  content: '<div class="mylabel">The label</div>',
  position: new google.maps.LatLng(-32.0, 149.0),
  // Styling options
  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();

資訊視窗自訂

資訊視窗自訂

function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  // Initialize properties
}

或，您可以從Google Maps API 擴充GOverlay 類別來建立您自己的自訂InfoWindow。此選項需要實作自訂方法來建立元素、在地圖上繪製元素以及處理事件。

首先，建立InfoBox 類別：

InfoBox.prototype = new google.maps.OverlayView();
// Implement createElement, draw, remove, and panMap methods

重寫必要的方法：此方法在自訂InfoWindow 的外觀和行為方面提供了更大的靈活性。

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