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