CSS溢出隐藏属性导致google地图api的问题 [英] CSS overflow hidden property causing problems with google map api
问题描述
我想使用qTip jquery插件显示google地图作为工具提示。我有页面上的元素数量，需要分配overflow：hidden到所有的。一切都很好，除了google地图工具提示似乎不工作（只是显示空白地图与谷歌徽标和服务条款）。我需要应用溢出隐藏到除工具提示块之外的所有块。当我采取全局溢出，地图showup没有问题。
我使用CSS属性不正确？如何解决这个问题？
I am trying to display google map as a tooltip using qTip jquery plugin. I have number of elements on the page and need to assign overflow: hidden to all of them. Everything works great, except for the google map tooltip does not seem to work (just shows blank map with Google logo & terms of service). I need to apply the overflow hidden to all the blocks except for the tooltip block. When I take the global overflow out, the map showup without a problem. Am I using the CSS properties incorrectly? How can I fix this? Code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
<script type="text/javascript" src='jquery.qtip-1.0.0-rc3.min.js'></script>
<script type="text/javascript" src="http://maps.google.com/maps/apijs?sensor=false"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
geocoder = new google.maps.Geocoder();
jQuery('td.a').each(function(i){
jQuery(this).qtip({
content: {
text: '<div id="map_canvas_'+i+'" latlon="'+jQuery('td.a').attr('tooltip')+'" addr="'+jQuery('td.a').attr('address')+'" style="width: 450px; height: 300px"></div>'
},
show: {
delay: 500,
when: 'click',
solo: true,
effect: { type: 'grow', length: 310 }
},
hide : {
when : {
event : 'unfocus'
}
},
position: { adjust: { screen: true } },
style: {
width: 490,
height: 300,
border: {
width: 5,
radius: 10
},
padding: 10,align: 'center',
tip: true
},
api: {
onShow : function() {
var ll = jQuery('#map_canvas_'+i).attr('latlon');
var latlong = ll.split(',');
var reslonger = new google.maps.LatLng(-34.397, 150.644);
geocoder.geocode({'address':jQuery('#map_canvas_'+i).attr('addr')},function(results,status){
if (status == google.maps.GeocoderStatus.OK) {
reslonger = results[0].geometry.location;
//alert(reslonger);
var reslong = new google.maps.LatLng(latlong[0], latlong[1]);
var myOptions = {
zoom: 15,
center: reslonger,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas_'+i), myOptions);
var marker = new google.maps.Marker({
position: reslonger,
map: map,
title:jQuery('#map_canvas_'+i).attr('addr') });
}else {
alert("Geocode was not successful for the following reason: " + status);}
} );
}
}
});
});
});
</script>
<style>
div
{
overflow: hidden;
}
</style>
</head>
<body>
<table style="height: auto" border="1" cellspacing="0" cellpadding="2" width="400">
<tbody>
<tr>
<td class="a" width="100" address="92123">
92123
</td>
<td class="a" width="100" address="91910">
91910
</td>
<td class="a" width="100" tooltip="38.8921,-77.033689" address="92154">
92154
</td>
<td class="a" width="100" tooltip="38.89051,-77.086294" address="90210">
90210
</td>
</tr>
</tbody>
</table>
</body>
</html>
推荐答案
这不能是你的所有代码，甚至在您的HTML中有任何 div 项。但是，对于大多数现代浏览器（CSS3），此css应该可以解决您的问题：
This must not be all your code, because you don't even have any div items in your html. However, for most modern browsers (CSS3), this css should fix your issue:
div[id^=map_canvas],
div[id^=map_canvas] div {overflow: auto;}
map_canvas由脚本和其所有的子div生成，并设置溢出恢复正常。
This will target any map_canvas generated by the script and all its child div's and set the overflow back to normal.
这篇关于CSS溢出隐藏属性导致google地图api的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
