为何Google Maps带文本标记的宽度无法调整？

我来帮你搞定这个Google Maps标记文本容器的尺寸问题！你设置了boxStyle里的宽度和不换行属性却没生效，这种情况通常是默认样式优先级或者配置细节的问题，试试下面这些方案：

• 确认boxStyle的配置位置：要确保你是把boxStyle放在InfoWindow的初始化选项里，而不是直接加到Marker（标记）的属性中。正确的写法应该是这样：

const infoWindow = new google.maps.InfoWindow({
  content: "你的标记文本内容",
  boxStyle: {
    opacity: 0.75,
    width: "280px",
    whiteSpace: "nowrap"
  }
});

• 强制覆盖默认样式：Google Maps的InfoWindow自带一些默认CSS，可能会覆盖你的自定义设置。可以尝试给样式加上!important来提升优先级，同时加上maxWidth防止内容自动撑开容器：

boxStyle: {
  opacity: 0.75,
  width: "280px !important",
  whiteSpace: "nowrap !important",
  maxWidth: "280px"
}

• 改用自定义HTML容器：如果内置的boxStyle还是不顶用，不如直接自己写一个HTML元素作为标记内容，样式控制权会更直接：

// 创建自定义内容容器
const customContent = document.createElement('div');
customContent.style.width = '280px';
customContent.style.whiteSpace = 'nowrap';
customContent.style.opacity = '0.75';
customContent.textContent = '你的标记文本内容';

// 初始化InfoWindow并使用自定义内容
const infoWindow = new google.maps.InfoWindow({
  content: customContent
});

• 检查文本内容本身：如果你的文本里包含了<br>标签或者换行符，whiteSpace: "nowrap"会失效，记得确保内容里没有强制换行的元素哦。

内容的提问来源于stack exchange，提问作者Kenneth Hong