javascript - 为什么我的 Chrome map 信息窗口中出现滚动条?

标签 javascript google-maps browser

这是 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
});

在 chrome 中,信息窗口弹出时出现不需要的滚动条。如果您查看右下角,您会注意到也有一点失真。

在 Chrome 中

my infowindow rendering in chrome

信息窗口在 Firefox 中看起来很棒。昨晚我在台式机上工作时没有遇到这个问题,所以我认为我的 chrome 安装可能在我的笔记本电脑上被破坏了。你怎么看?这是它在 FireFox 中的样子:

在 FireFox 中

einfowindow rendering in firefox

我尝试做 div#information{overflow:hidden},但没有任何改变 然后我尝试执行 div#information{overflow:hidden;height:500px;background-color:green;},然后滚动条变长了。 这告诉我信息窗口作为它自己的 div 并且“信息”div 的高度导致信息窗口的滚动条变大。 enter image description here


最佳答案

尝试添加这个 css 样式:

div#information{
    overflow: hidden;
}

关于javascript - 为什么我的 Chrome map 信息窗口中出现滚动条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7769765/

相关文章:

google-maps - 类型 'Promise<void>' 不可分配给类型 'Marker' 。属性 '_objectInstance' 在类型 'Promise<void>' 中缺失。 ionic 2

html - Google Chrome 不会加载图像,但其他浏览器会。图片 url 调出一个正方形

javascript - 通过 JS (ASP.NET MVC) 切换 div

javascript - 当 Select 包含重复值时使用 Cypress select()

google-maps - 从 Angular 2 服务设置谷歌地图 API key

javascript - 如何获取对已在 div 上设置的 map 的引用

javascript - 组件在功能组件内无法正常工作

javascript - 在放置在 View 中的 javascript 中传递 $rootScope 值

javascript - 从 HTML/JS 进行简单的操作系统检查

c# - 获取 HttpElement 文本