Question

当用户点击按钮

时，我使用此功能生成我的gmap

function getGMap(id_map,lat,lng) {

        var mapOptions = {
          center: new google.maps.LatLng(lat, lng),
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById(id_map),
            mapOptions);

        marker = new google.maps.Marker({
            map:map,
            //animation: google.maps.Animation.DROP,
            position: new google.maps.LatLng(lat, lng),
            icon: "../imgmdg/icons/map_pin.png"
        });
}



$(".toggleMap").click(function(){

       var id_map=$(this).attr('data-idmap');
       var lat=$(this).attr('data-lat');
       var lng=$(this).attr('data-lng');
       var status=$(this).attr('data-status');

       if(status=="0") { 

           console.log(id_map);
           console.log(lat);
           console.log(lng);
           $("#"+id_map).html('');
           getGMap(id_map,lat,lng); 


           $(this).attr('data-status','1');

       }

});

触发器:(第二个'li'中的类toggleMap）

 <ul class="nav nav-tabs tabsFixBorder">
      <li class="active"><a href="#<?=$menu->id()?>tab1" data-toggle="tab" class="tab1">Men&ugrave;</a></li>
      <li><a href="#<?=$menu->id()?>tab2" data-toggle="tab" class="tab2 toggleMap" data-idmap="map_<?=$menu->id()?>" data-lat="<?=$restaurant->lat()?>" data-lng="<?=$restaurant->lng()?>" data-status="0">Profilo</a></li>
    </ul>

在我的页面中有一些像这样的div：

<div id="map_1" class="gmap_container"></div>
<div id="map_2" class="gmap_container"></div>
<div id="map_3" class="gmap_container"></div>

这是我的css：

html{
    font-family: Arial, Helvetica, Verdana; 
    font-size: 12px; 
    color: #2d2929;    
    height: 100%;
}
body {
    height: 100%;
    min-height: 100%;
    position: relative;
    background-image: url('../imgmdg/pattern/pattern.jpg'); 
}
.gmap_container{
    display: block;
    /*tried with height:100% as well*/
    height:200px;
    width:100%;
    background-color: #fff !important;
    margin: 0px;
    padding-bottom:10px;
}

它只适用于我做的第一次点击点击一下地图就有问题了（它只加载地图的一部分）这是问题的屏幕截图：http://postimg.org/image/7apl01wn7/

感谢所有人的建议

Answer 1

最后我找到了解决问题的方法：最后我使用bootstrap选项卡作为我的地图的容器。诀窍是在加载选项卡后加载地图（例如我使用了“显示”的引导事件）

$('a[data-toggle="tab"]').on('shown', function (e) {
    getGMap(id_map,lat,lng);
});

希望这个帮助

文件准备好后加载gmap

1 个答案: