问

小册子地图在bootstrap 3.0模式中没有正确显示

刘丹小宝0 发布于 2023-02-12 17:21

地图

我有一个大问题.我想在模态中打开传单地图.但地图显示不正确.瓷砖没有加载.

这是脚本:

http://bootply.com/98730

Open Map



  
    
      
      Map

$.getScript('http://cdn.leafletjs.com/leaflet-0.7/leaflet.js',function(){

 /* map settings */
 var map = new L.Map('map-canvas');
 var cloudmade = new    L.TileLayer('http://{s}.tile.cloudmade.com/f1376bb0c116495e8cb9121360802fb0/997/256/{z}/{x} /{y}.png', {
 attribution: 'Map data © OpenStreetMap   contributors, Imagery © CloudMade',
 maxZoom: 18
 });
 map.addLayer(cloudmade).setView(new L.LatLng(41.52, -71.09), 13);


 });

任何帮助很多apreciated

3 个回答

我用这个解决方法:

.modal {
  visibility: hidden;
  display: block;
}

.modal[aria-hidden='false'] {
  visibility: visible;
  display: block;
}

2023-02-12 17:23 回答

WLII庾斌_787

您应该避免使用随机选择的延迟的setTimeout.使用'shown.bs.modal'事件而不是'show.bs.modal'的更好方法:

modal.on('shown.bs.modal', function(){
    setTimeout(function() {
        map.invalidateSize();
   }, 1);
})

或者使用下划线的延迟:

modal.on('shown.bs.modal', function(){
    _.defer(map.invalidateSize.bind(map));
})

2023-02-12 17:24 回答

皮H痞

我认为发生的事情是,在创建地图时,"map-canvas"元素的容器宽度/高度尚未调整到模态对话框的宽度/高度.这会导致地图大小不正确(小).

您可以通过致电解决此问题map.invalidateSize().这将重新调整L.Map容器的宽度/高度范围.

您可以通过挂钩显示Bootstrap模式的事件来自动调用它.
```
$('#myModal').on('show.bs.modal', function(){
  setTimeout(function() {
    map.invalidateSize();
  }, 10);
 });
```
将此代码插入JavaScript.显示模态时,地图将使其大小无效.超时是因为模式可能会有一些动画/转换时间显示并添加到DOM.
2023-02-12 17:24 回答

Blackn

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签