Question

我正在尝试使用qTip jquery插件将Google地图显示为工具提示。我在页面上有许多元素，需要为所有元素分配overflow：hidden。一切都很好，除了谷歌地图工具提示似乎不起作用（只显示带有谷歌徽标和服务条款的空白地图）。我需要将隐藏的溢出应用于除工具提示块之外的所有块。当我把全局溢出时，地图显示没有问题。我是否错误地使用了CSS属性？我怎样才能解决这个问题？代码如下。

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

Answer 1

这绝不是您的所有代码，因为您的html中甚至没有任何div个项目。但是，对于大多数现代浏览器（CSS3），此css应该可以解决您的问题：

div[id^=map_canvas], 
div[id^=map_canvas] div {overflow: auto;}

这将针对脚本及其所有子div生成的任何map_canvas，并将overflow恢复正常。

CSS溢出隐藏属性导致谷歌地图API的问题

1 个答案: