Fatal编程技术网
  • javascript/
  • Javascript 谷歌地图信息窗口的大小与预期不符

Javascript 谷歌地图信息窗口的大小与预期不符

javascript google-maps

Javascript 谷歌地图信息窗口的大小与预期不符,javascript,google-maps,Javascript,Google Maps,我只想显示一个默认的信息窗口，内容为123456789。 因此，我正在使用谷歌地图，并更改信息窗口的内容。就这么简单 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"><meta charset="utf-8"> <title>Info windows</

我只想显示一个默认的信息窗口，内容为123456789。 因此，我正在使用谷歌地图，并更改信息窗口的内容。就这么简单

<!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>


信息窗口
html，正文，#映射画布{高度：100%；边距：0px；填充：0px}
函数初始化（）{
var mylatng=new google.maps.LatLng（-25.363882131.044922）；
var mapOptions={zoom:4，center:myLatlng}；
var map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
var infowindow=new google.maps.infowindow({
内容：“123456789”
});
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
标题：“乌卢鲁（艾尔斯岩）”
});
google.maps.event.addListener（标记'click'，函数（）{
信息窗口。打开（地图、标记）；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
我在Firefox和Chrome中都能看到这一点（预计是123456789）。只有在IE中，我才能达到预期的效果。文本的其余部分被包装，并且在铬合金中，滚动条也可见

现在，根据文档，InfoWindow应该扩展以适合我的文本，如果内容比我正在测试的内容长一点，它就会这样做。这是谷歌地图的样式问题吗？我如何在没有自定义信息窗口和黑客css的情况下简单地显示文本

编辑

再次测试居留代码。infowindo第一次出现问题时，接下来的几次显示应该是正确的。

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

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

 google.maps.event.addListener(marker, 'click', function() {
   infowindow.setContent('something');
   infowindow.open(map,marker);
 });
您可以尝试将侦听器添加到infowindow“domready”事件（使用addListenerOnce），关闭infowindow，然后重新打开它

概念验证代码片段：

函数初始化（）{
var mylatng=new google.maps.LatLng（-25.363882131.044922）；
变量映射选项={
缩放：4，
中心：myLatlng
};
var map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
var infowindow=new google.maps.infowindow({
内容：“123456789”
});
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
标题：“乌卢鲁（艾尔斯岩）”
});
google.maps.event.addListener（标记'click'，函数（）{
google.maps.event.addListenerOnce（infowindow，'domready'，function（）{
infowindow.close（）；
信息窗口。打开（地图、标记）；
});
信息窗口。打开（地图、标记）；
});
google.maps.event.addListener（映射，'click'，函数（）{
infowindow.close（）；
});
google.maps.event.trigger（标记，'click'）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）

html，
身体，
#地图画布{
身高：100%；
边际：0px；
填充：0px
}


您应该将文本放入带有样式或具有样式属性的类的“”标记中


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



var infowindow=new google.maps.infowindow({
内容：“123456789”
});

尝试添加


style="word-wrap:nospace"


作为内容的属性


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



var infowindow=new google.maps.infowindow({
内容：'
'+123456789+'
'
});

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


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



这真是太好了。
我在我的真实问题上尝试过，但没有帮助。信息窗口第一次具有正确的大小。如果我关闭并重新打开它，它是这样的。我总是在演出前设置内容。您是在哪个浏览器中使用我的问题中的代码得到这个结果的？您发布的代码在Chrome中对我有效。@geocodezip我第一次单击它时，它几乎显示为问题中的图像，随后的单击会显示信息窗口。这不是我在Chrome中看到的。您使用的是什么浏览器？屏幕截图使用的是firefox。在chrome中，我还看到关闭按钮左侧有一个小的垂直滚动条，我可以使用firefox复制这个问题。它似乎解决了铬。只需按Ctrl+F5。第一次单击标记时，标记显示不正确。后续的点击效果很好。我可以在Chrome（39.0.2171.95 m）和Firefox（34.0.5）中使用代码片段[Ctrl+F5&“运行代码片段”]