Question

我只想显示内容为The 123456789的默认信息窗口。所以我使用谷歌的地图example，并更改infowindow内容。就这么简单。

<!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中滚动条也可见。

enter image description here

现在，根据文档，InfoWindow应该扩展为适合我的文本，如果内容比我测试的内容稍长，它就会这样做。这是一个谷歌地图样式问题，我怎么能简单地显示该文本没有自定义InfoWindows和没有hackish 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

你可以尝试在信息中添加一个监听器＆＃39; domready＆＃39; event（使用addListenerOnce），关闭infowindow，然后重新打开它。

概念证明代码段：

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您应该将文字放在＆＃39;＆lt; div＆gt;＆＃39;具有样式属性的样式或类的标记

   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。

谷歌地图Infowindow没有像预期的那样大小

5 个答案: