这是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中,当弹出窗口时,我会在infowindow中获得一个不需要的滚动条。如果你看右下角,你会发现也有一点失真。
infowindow在Firefox中看起来很棒。我昨晚在桌面上工作时没遇到这个问题,所以我想我的笔记本电脑上的镀铬安装可能会坏掉。你怎么看?这是FireFox中的样子:
我尝试过做div#information{overflow:hidden}
,但没有改变
然后我尝试了div#information{overflow:hidden;height:500px;background-color:green;}
,然后滚动条变长了。
这告诉我,infowindow正在扮演自己的div,而'信息'div的高度正在导致infowindow的滚动条变大。
答案 0 :(得分:5)
尝试添加此css样式:
div#information{
overflow: hidden;
}
答案 1 :(得分:5)
.gm-style-iw{ overflow: hidden !important;}
它对我有用
答案 2 :(得分:3)
This solution为我工作:
line-height:1.35;
overflow:hidden;
white-space:nowrap;
答案 3 :(得分:2)
可能是行高的问题。这就是造成我错误的原因。见Google Maps API v3: InfoWindow not sizing correctly回答#11125793(尼克)。