Question

我使用bootstrap 4在大型模式中添加谷歌地图。当模态显示时，Map是可行的，但是当我点击全屏按钮时，模态和地图不会显示为空白。想到这个，我的脑袋被打破了。如何解决？

在： before

在： after

我的javascript代码：

$(document).ready(function() {
var marker, i;
var markers=[];
function load_map(){
  if (typeof google === 'object' && typeof google.maps === 'object') {

    var myLatLng = new google.maps.LatLng(<?=$row->lat?>,<?=$row->lon?>);

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 20,
      center: myLatLng,
      fullscreenControl: true,
      scaleControl:true,
      streetViewControl:true,
      mapTypeId: google.maps.MapTypeId.HYBRID
    });

    infowindow = new google.maps.InfoWindow();

    //set markers
    var locations=<?=json_encode($kordinat)?>;
    for (i = 0; i < locations.length; i++) { 
      marker = new google.maps.Marker({
        animation: google.maps.Animation.DROP,
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: {
          url:base_url+'assets/base/images/marker_black.png'
        }
      });
      markers.push(marker);
    }
    //target marker
    marker = new google.maps.Marker({
        animation: google.maps.Animation.DROP,
        position: myLatLng,
        map: map
    });
    markers.push(marker);

    var markerCluster = new MarkerClusterer(map, markers,{imagePath: base_url+'assets/base/images/m'});
    map.setCenter(myLatLng);

  }else{
  $('#show-map').slideDown();
  $('#map').slideUp();
     alert('Tidak dapat memuat peta ! Periksa koneksi internet !');
  }
}

$('#show-map').click(function(){
    $(this).slideUp();
    $('#map').slideDown();
    setTimeout(function(){load_map()}, 1000);
});});

我的HTML代码：

<div class="modal fade modal-3d-slit show" id="modal-detail" aria-labelledby="exampleModalPrimary" role="dialog" tabindex="-1"><div class="modal-dialog modal-lg">
<div class="modal-content">
  <div class="modal-header">
      <div class="ribbon ribbon-corner ribbon-info ribbon-reverse">
        <a href="#" data-dismiss="modal">
          <span class="ribbon-inner"><i class="icon md-close" aria-hidden="true"></i></span>
        </a>
      </div>
      <h4 class="modal-title"><span class="icon md-account-circle"</span>Detail Izin</h4>
    </div>
  <div class="modal-body"><style type="text/css">li.list-group-item:hover{background: #eeeeee}</style>
    <div class="nav-tabs-animate nav-tabs-inverse nav-tabs-horizontal" data-plugin="tabs"><ul class="nav nav-tabs" role="tablist">
          <li class="nav-item" role="presentation"><a class="nav-link" data-toggle="tab" href="#tab-pemohon" aria-expanded="false">Pemohon</a></li>
            <li class="nav-item" role="presentation"><a class="nav-link active" data-toggle="tab" href="#tab-izin" aria-expanded="true">Izin</a></li>
          <li class="nav-item" role="presentation"><a class="nav-link" data-toggle="tab" href="#tab-persyaratan" aria-expanded="false">Persyaratan</a></li>
          <li class="nav-item" role="presentation"><a class="nav-link" data-toggle="tab" href="#tab-tindakan" aria-expanded="false">Riwayat Tindakan</a></li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane animation-scale-up mt-10 active" id="tab-izin" role="tabpanel" aria-expanded="true">
              <table class="table table-hover"></table>
              <button type="button" class="btn btn-primary waves-effect waves-classic btn-block btn-lg" id="show-map"><i class="icon md-map"></i> Tampilkan Peta</button>

              <div id="map" style="height: 400px; width: 100%;"></div>

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

Answer 1

我正在用Bootstrap做类似的事情（不是Google Map，而是Esri的JS映射库）-将地图放在模式中，但要占用尽可能多的空间。我知道JS地图确实很挑剔-您必须为浏览器提供某种方式来设置至少一个以像素为单位的尺寸，除非您要为两个尺寸都设置100％的尺寸。（至少，这就是我刚开始使用JS Maps时的样子。）我怀疑这可能正在发生，但是我还猜测当您单击全屏时，地图不再知道它应该在其中情态内容。

无论如何，我在模态主体div中使用了一个iframe（id =“ mapiFrame”），以下CSS使我真正接近到我想要的东西：

#mapiFrame {
  height: calc(80vh - 5px);
  width: calc(90vw - 5px);
}

.modal-dialog {
  max-width: none;
  max-height: none;
  margin: 2px;
  padding: 2px;
}

全屏谷歌地图在bootstrap 4大模态不显示

1 个答案: