如何在 Google 地圖中建立帶有方角的自訂 InfoWindows？

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