javascript - 谷歌地图渲染不正确，无法用已经给出的答案解决这个问题

Question

我遇到了有关 map 的问题。我正在使用 Joomla 组件 Listbingo，并制作了一个带有隐藏 div 和步骤的订单表单。

在第二步中，Google map 必须显示，但它没有以正确的方式呈现。有些部分是灰色的，并且位置不正确。现在我知道谷歌地图对隐藏的 div 不满意，但我无法用已经给出的答案解决这个问题。

<script
    src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=<?php echo $this->params->get('map_api_key');?>"
    type="text/javascript"></script>
<script type="text/javascript">
//<!--
    var map;
    var marker;
    var markeradded=false;
    var markerfixed=false;
    var current_point;
    var catIcon;


    function initialize() 
    {
      if (GBrowserIsCompatible())
      {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setUIToDefault();
         map.disableScrollWheelZoom();
        geocoder = new GClientGeocoder();   


      }
    }

    window.addEvent('domready',function()

    {

        initialize();
        //var mapSlider = new Fx.Slide('gb_maplocator', {duration: 1000});
        var mapSlider = document.getElementById('gb_maplocator');
        //var mapSlider = $('gb_maplocator');

        <?php if( $this->data->published==0){?>
            mapSlider.style.visibility = 'hidden';
            mapSlider.style.height = '0px';
            mapSlider.style.overflow = 'hidden';   
        <?php } ?>


        $$('.gb_map_controls').addEvent('click',function(){
            if(this.getProperty('value')==1)
            {
                mapSlider.style.visibility = 'visible';   
                mapSlider.style.height = 'auto';


            }
            else if(this.getProperty('value')==0)
            {
                mapSlider.style.visibility = 'hidden';
                mapSlider.style.height = '0px';
                mapSlider.style.overflow = 'hidden';   
            }
        });

        $('btnAddtomap').addEvent('click',
            function(e) {           
                $('map_level').value=map.getZoom();         
                $('map_glat').value=current_point.lat();
                $('map_glng').value=current_point.lng();
        });



        GEvent.addListener(map, "zoomend",
            function(oldlevel,newlevel) {                   
                $('map_level').value=newlevel;
        });

        GEvent.addListener(map, "dragend",
            function() {                    
                current_point=map.getCenter();
        });

        <?php 
        if( $this->pin->map_image )
        {
        ?>
            catIcon = new GIcon();              
            catIcon.image = '<?php echo JUri::root().$this->pin->map_image.".".$this->pin->extension;?>';
            catIcon.shadow = '<?php echo JUri::root().$this->pin->shadow_image.".".$this->pin->extension;?>';           
            //catIcon.iconSize = new GSize(25.0, 32.0);
            //catIcon.shadowSize = new GSize(42.0, 32.0);
            catIcon.iconAnchor = new GPoint(12.0, 16.0);
            catIcon.infoWindowAnchor = new GPoint(12.0, 16.0);
            map.disableScrollWheelZoom();


        <?php
        }
        if(abs($this->data->glat)==0&&abs($this->data->glng)==0)
          {
            $country=$mainframe->getUserState($option."countrytitle");
            $region=$mainframe->getUserState($option."regiontitle");

            $address= array();
            if($region!= JText::_('ALL') && !empty($region)){
                $address[]=$region;
            } 

            if($country!= JText::_('ALL') && !empty($country)){
                $address[]=$country;
            } 
            array_filter ($address);

            if(count($address)>0)
            {
            ?>
                showAddress('<?php echo implode(',',$address)?>');
            <?php
            }
            else
            {
            ?>          
                showAddress('<?php echo $this->params->get('map_default_address','Brisbane, Australia');?>');
            <?php
            }
        }
        else
        {
            if( ! $this->pin->map_image && $this->data->map_image )
            {
            ?>
                catIcon = new GIcon();
                catIcon.image = '<?php echo JUri::root().$this->data->map_image.".".$this->data->extension;?>';
                catIcon.shadow = '<?php echo JUri::root().$this->data->shadow_image.".".$this->data->extension;?>';
                //catIcon.iconSize = new GSize(25.0, 32.0);
                //catIcon.shadowSize = new GSize(42.0, 32.0);
                catIcon.iconAnchor = new GPoint(12.0, 16.0);
                catIcon.infoWindowAnchor = new GPoint(12.0, 16.0);

            <?php }?>

            current_point=new GLatLng(<?php echo $this->data->glat;?>,<?php echo $this->data->glng;?>);
            map.setCenter(current_point,<?php echo $this->data->level;?>);
            marker = new GMarker(current_point,{icon:catIcon,draggable:true});

            GEvent.addListener(marker, "dragend",
                function(latlng) {
                    current_point = latlng;
                    $('map_level').value=map.getZoom();
                    $('map_glat').value=latlng.lat();
                    $('map_glng').value=latlng.lng();

            });

            marker.disableDragging();
            map.addOverlay(marker);


            markeradded=true;
            markerfixed=true;
            $('addMarkerButton').disabled=true;
            $('addMarkerButton').setHTML("<?php echo JText::_('REMOVE_MARKER');?>");
            $('fixMarkerButton').setHTML("<?php echo JText::_('UNFIX_MARKER');?>");
            $('map_level').value=map.getZoom();         
            $('map_glat').value=current_point.lat();
            $('map_glng').value=current_point.lng();
            <?php if($this->data->published==0){?>

                mapSlider.style.visibility = 'hidden';
                mapSlider.style.height = "0px";
                mapSlider.style.overflow = 'hidden';   
        <?php }?>

            <?php 
        }
        ?>
        if(markeradded)
        {
            $('fixMarkerButton').disabled=false;
        }
        else
        {
            $('fixMarkerButton').disabled=true;
        }
    });

    window.addEvent('unload',function(){GUnload()});
    //-->
    </script>
<div class="gb_madata_publish">

<label><?php echo JText::_('Activeer Google Maps');?>:</label><div  class="gb_madata_publish_control"><?php echo $this->lists['status'];?></div>
</div>

<div class="gb_map_locator" id="gb_maplocator">
<a id="btnAddtomap"><?php echo JText::_('LOCATE_ADDRESS_TO_MAP');?></a>
<fieldset class="adminform"><input type="hidden" name="glat"
    id="map_glat" /> <input type="hidden" name="glng" id="map_glng" /> <input
    type="hidden" name="level" id="map_level" />

<div id="map_canvas" style="width: 310px; height: 310px"></div>
<br />
<div class="mapbuttons"><a id="addMarkerButton"><?php echo JText::_('ADD_MARKER');?></a>
<a id="fixMarkerButton"><?php echo JText::_('FIX_MARKER');?></a></div>
</fieldset>


</div>

我希望有人能帮助我，我已经被这个问题困扰了几个星期......

Answer 1

解决了:)

改变了这一点: map = 新 GMap2(document.getElementById("map_canvas")); 在: map = 新 GMap2(document.getElementById("map_canvas"),{ 大小: 新 GSize(430, 315) });