Google Maps标记Snippet仅显示两行内容，如何设置显示全部文本？

嘿，这个问题我之前做项目的时候也碰到过！Google Maps默认的标记信息窗口（InfoWindow）确实会自动截断过长的snippet内容，最多显示两行左右。要让所有文本都能完整展示，其实有几个实用的办法：

方法一：自定义InfoWindow内容（最推荐） #

默认的InfoWindow样式有内置限制，我们可以直接用HTML自定义内容，完全控制文本的显示逻辑，甚至可以添加滚动条来处理超长文本：

// 假设你已经初始化了map和marker对象
const longSnippetText = "这里是你从数据库读取的大量文本内容，不管多长都能完整显示...";

// 创建自定义的InfoWindow
const customInfoWindow = new google.maps.InfoWindow({
  // 用div包裹文本，设置最大高度和滚动条，也可以自定义其他样式
  content: `<div style="padding: 10px; max-height: 250px; overflow-y: auto; max-width: 300px;">
              <strong>${marker.title}</strong><br>
              ${longSnippetText}
            </div>`
});

// 给标记绑定点击事件，打开自定义的InfoWindow
marker.addListener('click', () => {
  customInfoWindow.open(map, marker);
});

这样设置后，当文本超出设定的最大高度时，会自动出现垂直滚动条，用户可以滚动查看全部内容。你还能通过CSS调整字体、内边距、宽度等样式，完美适配项目需求。

方法二：替换默认的snippet行为 #

如果你原本是直接给marker设置snippet属性导致文本被截断，可以直接放弃默认的InfoWindow，改用上面的自定义方式。或者，你也可以监听标记的click事件，动态生成包含完整文本的InfoWindow：

marker.setPosition(yourLatLng);
marker.setTitle(yourTitle);
// 不用设置默认的snippet，而是在点击时生成完整内容
marker.addListener('click', function() {
  const fullContent = `<div>
                        <h4>${this.getTitle()}</h4>
                        <p>${你的完整文本}</p>
                      </div>`;
  const infoWindow = new google.maps.InfoWindow({content: fullContent});
  infoWindow.open(map, this);
});

小提示 #

• 移动端场景下，建议把InfoWindow的max-width设置得小一些，避免超出屏幕宽度；
• 可以给自定义的div添加white-space: pre-line样式，保留文本中的换行符，让内容排版更美观。

内容的提问来源于stack exchange，提问作者Alex E.