如何在 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中文网其他相关文章！