CSS переполнение скрытое свойство вызывает проблемы с API Google Map - PullRequest
Новая
       38

CSS переполнение скрытое свойство вызывает проблемы с API Google Map

4 голосов
/ 19 ноября 2011

Я пытаюсь отобразить карту Google в виде всплывающей подсказки, используя плагин qTip jquery.У меня есть количество элементов на странице, и мне нужно назначить переполнение: скрыто для всех них.Все работает отлично, за исключением того, что подсказка Google Map, похоже, не работает (просто показывает пустую карту с логотипом Google и условиями обслуживания).Мне нужно применить переполнение, скрытое ко всем блокам, кроме блока всплывающей подсказки.Когда я вынимаю глобальное переполнение, карта отображается без проблем.Я неправильно использую свойства 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>

1 Ответ

2 голосов
/ 29 ноября 2011

Это не должен быть весь ваш код, потому что в вашем html даже нет элементов div.Тем не менее, для большинства современных браузеров (CSS3) этот css должен решить вашу проблему: 

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

Это будет нацелено на любой map_canvas, сгенерированный скриптом и всеми его дочерними div-объектами, и вернет overflow в нормальное состояние.

...