0

ユーザーがボタンをクリックしたときに、この関数を使用して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');

       }

});

トリガー: (2 番目の「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;
}

マップを 1 回クリックした後に行う最初のクリックでのみ機能します (マップの一部のみをロードします)。これは問題のスクリーンショットです: http://postimg.org/image/7apl01wn7/

すべてのアドバイスに感謝

4

1 に答える 1

1

最後に、私の問題の解決策を見つけました。最後に、マップのコンテナーとしてブートストラップ タブを使用しました。秘訣は、タブがロードされた後にマップをロードすることです（たとえば、ブートストラップイベント「表示」を使用しました）

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

この助けを願っています

于 2013-04-16T21:25:48.147 に答える