Chrome Only Bootstrap + Google Maps Bug

讓我先說地圖繪製正確，這不是其他地圖/引導程序錯誤的重複。Chrome Only Bootstrap + Google Maps Bug

我有一個問題，在twitter bootstrap模式上的地圖造成模態被視覺剪輯。

enter image description here

這似乎是因爲它不會在Firefox或Safari發生在Chrome僅錯誤。

我使用：谷歌地圖API V3 & twiter引導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"

地圖顯示沒有問題，但模式的其餘部分不見了。這不會發生在網站上的任何其他模式（查看圖片等）。沒有額外的CSS或樣式。模態和所有元素放置正確，並且所有z-索引顯示正確。輸入框和按鈕仍然有效，但它們只是繪製不正確。

來源

2014-01-24 timetraveler

此錯誤是一個地圖錯誤並已解決本身。我沒有改變一行代碼或更新的chrome。

地圖不再與其容器混淆。我爲了這個bug暫時凍結了Chrome版本。唯一可以改變的因素是地圖API。雖然沒有公開列出新的API版本，但我並沒有在該頁面上指定版本號，所以我可能會得到一箇舊版本。

我希望我有更好的解釋。

來源

2014-02-13 02:03:15 timetraveler

試用的.noConflict（）方法，如下：

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

來源

2014-01-24 18:52:08

很遺憾，我曾試過這個，但它沒有解決問題。 – timetraveler

Chrome Only Bootstrap + Google Maps Bug

回答

相關問題