Google 地图信息窗口大小不符合预期

Question

我只想显示内容为 The 123456789 的默认信息 window。所以我正在使用 google 中的地图 example，并更改信息 window 内容。就这么简单。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"><meta charset="utf-8">
    <title>Info windows</title>
    <style>html, body, #map-canvas {height: 100%;margin: 0px;padding: 0px}</style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {zoom: 4,center: myLatlng};

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);                        
  var infowindow = new google.maps.InfoWindow({
      content: 'The 123456789'
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head><body><div id="map-canvas"></div></body></html>

我在 Firefox 和 Chrome（预计 The 123456789）中都得到了这个。只有在 IE 中我有想要的结果。其余文本被换行，在 chrome 中滚动条也可见。

现在，根据文档，应该扩展信息窗口以适合我的文本，如果内容比我正在测试的内容稍长，它就会这样做。这是 google 地图样式问题吗？我如何在没有自定义 InfoWindows 且没有骇人听闻的情况下简单地显示该文本 css？

编辑

再次测试了住所代码。第一次显示 infowindo 有问题，接下来的几次都正常显示。

Answer 1

刚刚测试了您的代码，似乎是正确的。

https://www.dropbox.com/s/i1bgvg74chb3hzt/Screenshot%202015-01-10%2017.53.36.png?dl=0

您可以做的一件事是，与其创建充满内容的信息窗口，不如创建实例，然后单击设置内容。

 google.maps.event.addListener(marker, 'click', function() {
   infowindow.setContent('something');
   infowindow.open(map,marker);
 });

Answer 2

您可以尝试向信息窗口 'domready' 事件添加侦听器（使用 addListenerOnce），关闭信息窗口，然后重新打开它。

概念验证代码片段：

function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var infowindow = new google.maps.InfoWindow({
    content: 'The 123456789'
  });

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  google.maps.event.addListener(marker, 'click', function() {
    google.maps.event.addListenerOnce(infowindow,'domready',function() {
      infowindow.close();
      infowindow.open(map,marker);
    });
    infowindow.open(map, marker);
  });
    google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });
  google.maps.event.trigger(marker,'click');
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>

Answer 3

您应该将文本放在具有样式的“

”标签中，或者 class 具有样式属性

   var infowindow = new google.maps.InfoWindow({
       content: '<div style="width: 10em;">The 123456789</div>'
   });

Answer 4

尝试添加

style="word-wrap:nospace"

作为内容的一个属性

var infowindow = new google.maps.InfoWindow({
    content: '<p style="word-wrap:nospace">'+The 123456789+'</p>'
});

Answer 5

这是由于全局 img 样式。要还原它，我刚刚添加了

.gm-style img { max-width: none; }

感谢此 answer。

Google 地图信息窗口大小不符合预期

Google maps Infowindow doesnt size as expected

javascript

google-maps