html - Chrome Only Bootstrap + Google Maps Bug

Question

首先让我说 map 绘制正确，这不是其他 map /Bootstrap 错误的副本。

我遇到一个问题，即 Twitter Bootstrap 模态中的 map 导致模态在视觉上被剪裁。

这似乎是 Chrome 独有的错误，因为它不会发生在 Firefox 或 Safari 上。

我正在使用:google maps api v3 和 twiter bootstrap 3.0.3

HTML

       <div id="map_picker" class="modal fade" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-body">
              <div id="map_canvas" style="width:100%; height:300px"></div><br/>
            </div>
            <div class="modal-footer">
              <div class="row">
                <div class="col-md-2">
                  <label for="address class="control-label">Address: </label>
                </div>
                <div class="col-md-7">
                  <input id="address" class="form-control" type="text"/>
                </div>
                <div class="col-md-3">
                  <button class="btn btn-primary pull-right" id="apply_location">Apply</button>
                </div>
              </div>
            </div>
          </div> 
        </div>  
      </div>

显示模态的coffeescript

      ($ '#map_picker').on 'shown.bs.modal', () ->
        google.maps.event.trigger window.map, "resize"

map 显示没有问题，但模式的其余部分消失了。网站上的任何其他模式(查看图片等)都不会发生这种情况。没有额外的 css 或样式。模态和所有元素都正确放置，所有 z 索引显示正确。输入框和按钮仍然可以使用，只是没有正确绘制。

Answer 1

试试 .noConflict() 方法，如下:

var bootstrapModal = $('#map_picker').modal.noConflict();
$('#map_picker').bootstrapMdl = bootstrapModal;