如何設計 Google 地圖 InfoWindows 的樣式？

設定 Google 地圖 InfoWindows 的樣式

由於文件有限，自訂 Google 地圖 InfoWindows 的外觀可能是一項挑戰。但是，有多種方法可以實現所需的樣式。

使用 InfoBubble

與 InfoWindow 相比，為了獲得更大的彈性，請考慮使用 InfoBubble 類別。透過匯入其參考文件，您可以透過其可自訂的屬性存取高級樣式選項。範例：

<code class="javascript">infoBubble = new InfoBubble({
  map: map,
  content: '<div class="mylabel">The label</div>',
  position: new google.maps.LatLng(-32.0, 149.0),
  ...  // Custom styling options
});</code>

擴充 GOverlay

要更好地控制 InfoWindow 的外觀，請擴充 GOverlay 類別。這種方法允許您在地圖上繪製自訂 div，定義其位置、大小和樣式。以下是 InfoWindow 擴充的範例：

<code class="javascript">function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  ...  // Initialize properties

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

修改 InfoWindow 元素

另一個選擇是直接使用 JavaScript 或 jQuery 來修改 InfoWindow 的元素。存取必要的元素並套用樣式：

<code class="javascript">var infowindow = new google.maps.InfoWindow();
$('#content').attr('style', 'background-color: #000');</code>

雖然這種方法比使用 InfoBubble 或擴展 GOverlay 提供的控制更少，但它可以更簡單地進行較小的樣式修改。

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