Google Maps InfoWindow经纬度换行显示问题求助

问题根源 #

你用textContent设置内容时，所有字符都会被当作纯文本处理：HTML标签会直接显示而不解析，\n换行符也不会触发视觉上的换行（默认元素不会识别纯文本里的换行）。

可行解决方案 #

• 方法1：使用innerHTML替代textContent
  直接用HTML的<br>标签实现换行，innerHTML会解析HTML标签：

  function showAllColleges(allData) {
    var infoWind = new google.maps.InfoWindow;
    Array.prototype.forEach.call(allData, function(data){
      var content = document.createElement('div');
      var strong = document.createElement('strong');
      strong.innerHTML = data.lat + '<br>' + data.lng; // 替换textContent为innerHTML，添加<br>
      content.appendChild(strong);
      // 后续绑定InfoWindow到标记等代码
    });
  }
  

• 方法2：创建独立元素分别承载纬度和经度
  不需要HTML标签，通过添加多个块级元素实现换行（块级元素默认占一行）：

  function showAllColleges(allData) {
    var infoWind = new google.maps.InfoWindow;
    Array.prototype.forEach.call(allData, function(data){
      var content = document.createElement('div');
      
      // 纬度元素
      var latStrong = document.createElement('strong');
      latStrong.textContent = data.lat;
      content.appendChild(latStrong);
      
      // 经度元素
      var lngStrong = document.createElement('strong');
      lngStrong.textContent = data.lng;
      content.appendChild(lngStrong);
      
      // 后续绑定InfoWindow到标记等代码
    });
  }
  

• 方法3：保留textContent并设置样式让换行符生效
  如果想继续用纯文本换行符\n，给元素设置white-space: pre-wrap样式，让浏览器识别换行符：

  function showAllColleges(allData) {
    var infoWind = new google.maps.InfoWindow;
    Array.prototype.forEach.call(allData, function(data){
      var content = document.createElement('div');
      var strong = document.createElement('strong');
      strong.textContent = data.lat + '\n' + data.lng; // 用\n分隔内容
      strong.style.whiteSpace = 'pre-wrap'; // 开启换行符解析
      content.appendChild(strong);
      // 后续绑定InfoWindow到标记等代码
    });
  }
  

内容的提问来源于stack exchange，提问作者Liparia Splendens