設定 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中文網其他相關文章！
