使用 JavaScript 的 Google 地图无法在 jQuery 选项卡中正确显示

Posted 2023-03-06

【中文标题】使用 JavaScript 的 Google 地图无法在 jQuery 选项卡中正确显示

【英文标题】：Google Maps using JavaScript is not displaying properly in jQuery tab

【发布时间】：2014-02-23 20:14:39

【问题描述】：

我有 3 个使用 jQuery 和 CSS 创建的选项卡，例如

不显示包含 Google 地图的位置选项卡。问题出在哪里？

<div id="map_canvas" style="width:500px;height:360px;border:1px solid #333333;"></div>

这个 div 在一个 jQuery 选项卡（位置）内，代码是：

    <div class="detail_tab_left">           
        <section class="tabs">
            <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
            <label for="tab-1" class="tab-label-1">Amenities</label>

            <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
            <label for="tab-2" class="tab-label-2">Specification</label>

            <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
            <label for="tab-3" class="tab-label-3">Location  </label>
            <div class="clear-shadow"></div>

            <div class="content">            


                 <div class="content-1" style="overflow: scroll; overflow-x: hidden; width:731px;">

                    <?php if($get_aminities)
                    foreach($get_aminities as $val)
                    

                    ?> 
                                                      <?=$val['feature_value'] ?>
                         <?php else ?>
                          <div style="font-family:lato; font-size:14px; color:#333334;"> No AMENITIES! </                              div>
                         <?php  ?>
                </div>              


              <div class="content-2" style="overflow: scroll; overflow-x: hidden; width:731px;">
                <?php if($get_specification)
                 foreach($get_specification as $val_specification)
                 

                ?>
               <div style="font-family:lato; font-size:14px; color:#333334;line-height:23px; "><?=$val_specification['feature_value'] ?>.</div>
               <?php      else ?> 
               <div style="font-family:lato; font-size:14px; color:#333334;">NO SPECIFICATION</div>
               <?php  ?>   
             </div>

                <div class="content-3">

            <?php 
            $location=substr($value['property_location'],1,-1);
            if($location)
                $val_loc=explode(",","$location");
            

            //print_r($val_loc);
            ?>
            <input type="hidden" id="latitude" name="latitude" value="<?=$val_loc['0']?>">
            <input type="hidden" id="longitude" name="longitude"  value="<?=$val_loc['1']?>">
            <input type="hidden" id="map_title" name="map_title"  value="<?=$value['property_type']." ".$value['property_listing_type']." at ".$value['property_city']?>">
            <input type="hidden" id="map_price" name="map_price"  value="<?=$total_price?>&nbsp;<?=$total_price_unit?>">
            <input type="hidden" id="map_location" name="map_location"  value="<?=$value['property_city']?>">

            <div id="map_canvas" style="width:1042px;height:360px;border:1px solid #333333;display: block;"></div>
            <script language="javascript">
            var myLatlng = new google.maps.LatLng($('#latitude').val(),$('#longitude').val());
            var myOptions = 
            zoom: 13,
            center: myLatlng,
            scrollwheel: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
                       


            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
            var marker = new google.maps.Marker(
            draggable: false,
            position: myLatlng, 
            map: map,
            title: 'Property Location'
            );
            var contentString = '<div style="line-height:20px;font-size:11px;padding-top:5px"><div align="left"><b>'+$('#map_title').val()+'</b></div>';
            contentString += '<div align="left">Total Price: '+$('#map_price').val()+'</div>';
            contentString += '<div align="left">Location: '+$('#map_location').val()+'</div>';
            var contentString = contentString;
            var infowindow = new google.maps.InfoWindow(
            content: contentString
            );
            google.maps.event.addListener(marker, 'click', function() 
            infowindow.open(map,marker);
            );
                </script>   
                        </div>


            </div>
        </section>
 </div>

谁能帮帮我？

【问题讨论】：

我只是在我的 jqury 选项卡（位置）中替换了这个 googlemap 代码，它工作正常。是否可以在 jquery 选项卡中添加 div？

【参考方案1】：

尝试在标签的click 事件上重新加载地图。

$('label[for=tab-3]').click( function () 
    google.maps.event.trigger(map, 'resize');
 )

就像@Dh 建议的那样，在开始时将map 声明为全局。

【讨论】：

页面上的 JavaScript 错误太多。事实上，我不确定您是否正确加载/引用 jQuery。它需要一个知道自己在做什么的开发人员的工作，对不起:)

【参考方案2】：

请更正以下错误，希望能解决您的问题。

在脚本开头定义map varialbe如下

1)var map= null;

2) 您在创建 map 对象之前使用它。

google.maps.event.trigger(map, 'resize'); map.setZoom( map.getZoom() );

把上面的代码放在下面一行

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

【讨论】：

其实问题是 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); map_canvas id取自 这个div有问题可以加div在 jquery 选项卡内？

我删除了这段代码 google.maps.event.trigger(map, 'resize'); map.setZoom(map.getZoom());实际上我的问题是 这个 div 在 jquery 选项卡中不起作用