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

Posted

技术标签:

【中文标题】使用 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 选项卡中不起作用

以上是关于使用 JavaScript 的 Google 地图无法在 jQuery 选项卡中正确显示的主要内容,如果未能解决你的问题,请参考以下文章

在 Javascript 中使用 DJango 模板标签添加 Google 地图标记

使用 Python“运行 Javascript”输入更新 Google 地图标记位置

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

JavaScript 使用Google地图进行HTML5地理定位

JavaScript 使用“我的地图”中的.kml文件的Google Maps API

在使用Javascript API实施Google地图时,似乎没有为我加载整个地图