在 Google 地圖中建立自訂 InfoWindow
點擊地圖標記時出現的預設 Google 地圖 InfoWindow 通常具有圓角。然而，您可能需要一個更客製化的帶有方角的資訊視窗。本文提供了實現此自訂的指導。
使用 JavaScript 函式庫
外部 JavaScript 函式庫為建立自訂 InfoWindows 提供了強大的解決方案。一種流行的選擇是 Google Maps Info Bubble 庫。它允許您修改 InfoWindows 的外觀、形狀和內容以滿足您的特定要求。
範例實作
以下程式碼片段示範如何實作自訂使用Info Bubble 函式庫的InfoWindow：
<code class="js">const infoBubble = new google.maps.InfoWindowBubble({
maxWidth: 300, // Maximum width of the InfoWindow
maxHeight: 200, // Maximum height of the InfoWindow
arrowPosition: 50, // Offset of the arrow from the center of the InfoWindow
padding: 10, // Padding around the content of the InfoWindow
borderWidth: 1, // Border width around the InfoWindow
borderColor: "#000000", // Border color of the InfoWindow
backgroundColor: "#FFFFFF", // Background color of the InfoWindow
hideCloseButton: true, // Hide the close button on the InfoWindow
borderRadius: 0, // Set the border radius to 0 for square corners
});
// Attach the custom InfoWindow to a map marker
const marker = new google.maps.Marker({
position: {
lat: 0,
lng: 0,
},
map,
});
marker.addListener("click", () => {
infoBubble.setContent("This is a custom InfoWindow.");
infoBubble.open(map, marker);
});</code>此範例建立一個最大尺寸為300 像素寬和200 像素高的方角InfoWindow。它有黑色邊框、白色背景，並且沒有可見的關閉按鈕。
替代方案
如果資訊氣泡庫無法滿足您的需求，請考慮探索其他選項，例如作為 MarkerClusterer 庫或 DataLayer 庫。兩者都提供靈活的解決方案來自訂 InfoWindows 並增強您的 Google 地圖體驗。
以上是如何在 Google 地圖中建立帶有方角的自訂 InfoWindows？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
