为什么我的地图中的滚动条会出现在chrome中?

Spe*_*ley 11 javascript browser google-maps

这是JavaScript:

$(document).ready(function(){

//set location of san antonio 
var san_antonio = new google.maps.LatLng(29.4, -98.544);

//set infowindow
var infoWindow;

//object literal containing the properties
var options = {
  zoom: 9,
  center: san_antonio,
  mapTypeId: google.maps.MapTypeId.ROADMAP 
}

//create the map
var map = new google.maps.Map(document.getElementById('map'), options);

//create marker
var marker = new google.maps.Marker({
  position: san_antonio,
  map:map,
  title: "san antonio"
});


//add 'click' event listener
google.maps.event.addListener(marker, 'click', function(){

//creates infowindow if it already doesn't exist
if (!infoWindow){
  infoWindow = new google.maps.InfoWindow();
}

//create content for infowindow
var content = '<div id="information">'+'<img src="http://a1.twimg.com/profile_images/1549555880/Screenshot.png"/>'+'</div>'

//set content of the infowindow. 
infoWindow.setContent(content);

//open infowindow on click of marker 
infoWindow.open(map,marker);

//ends the event listener
}); 


//ends the DOM loader
});
Run Code Online (Sandbox Code Playgroud)

在Chrome中,当它弹出时,我会在infowindow中获得一个不需要的滚动条.如果你看右下角,你会发现也有一点失真.

在Chrome中

我的infowindow呈现在chrome中

infowindow在Firefox中看起来很棒.我昨晚在桌面上工作时没遇到这个问题,所以我想我的笔记本电脑上的镀铬安装可能会坏掉.你怎么看?这是FireFox中的样子:

在FireFox中

在Firefox中的einfowindow渲染

我尝试过div#information{overflow:hidden},但没有改变,然后尝试做 div#information{overflow:hidden;height:500px;background-color:green;},然后滚动条刚刚变长.这告诉我,infowindow正在扮演自己的div,而'信息'div的高度正在导致infowindow的滚动条变大. 在此输入图像描述


Jel*_*lly 5

尝试添加此css样式:

div#information{
    overflow: hidden;
}
Run Code Online (Sandbox Code Playgroud)

  • 请阅读此内容并尝试:http://onwebdev.blogspot.com/2011/02/css-stylizing-google-maps-infowindow.html (2认同)

Rej*_*ath 5

.gm-style-iw{ overflow: hidden !important;}
Run Code Online (Sandbox Code Playgroud)

这个对我有用