传单地图在引导程序

传单地图在引导程序

关注
发信
关注(28)粉丝(399)

传单地图在引导程序 3.0 模式中未正确显示

本文介绍了传单地图在引导程序 3.0 模式中未正确显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

这里是脚本:

http://bootply.com/98730

<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">打开地图</a><div id="myModal" class="modal"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title">地图</h4>

<div class="modal-body"><div class="modal-body" id="map-canvas"></div>

<div class="modal-footer"><button type="button" class="btn" data-dismiss="modal" aria-hidden="true">OK</button>

$.getScript('http://cdn.leafletjs.com/leaflet-0.7/leaflet.js',function(){/* 地图设置 */var map = new L.Map('map-canvas');var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/f1376bb0c116495e8cb9121360802fb0/997/256/{z}/{x}/{y}.png', {属性:'地图数据 © <a href="http://openstreetmap.org">OpenStreetMap</a>贡献者，图像 © <a href="http://cloudmade.com">CloudMade</a>',最大缩放:18});map.addLayer(cloudmade).setView(new L.LatLng(41.52, -71.09), 13);});

非常感谢任何帮助

解决方案

我认为发生的事情是，当创建地图时，您的 `map-canvas' 元素的容器宽度/高度尚未调整为模态对话框的宽度/高度.这会导致地图大小不正确(小于)应有的大小.

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

您可以通过挂钩到显示 Bootstrap 模式的事件来自动调用它.

$('#myModal').on('show.bs.modal', function(){设置超时(功能(){map.invalidateSize();}, 10);});

将此代码插入到您的 JavaScript 中.当显示模态时，地图将使其大小无效.超时是因为模态显示和添加到DOM可能会有一些动画/过渡时间.

i have a big problem. i want to open a leaflet map in a modal.but the map is not showing properly. the tiles are not loading.

here is the script:

http://bootply.com/98730

<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Open Map</a>

<div id="myModal" class="modal">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h4 class="modal-title">Map</h4>
    </div>
    <div class="modal-body">
      <div class="modal-body" id="map-canvas"></div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn" data-dismiss="modal" aria-hidden="true">OK</button>
    </div>
  </div>
</div>

$.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 © <a href="http://openstreetmap.org">OpenStreetMap</a>   contributors, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
 maxZoom: 18
 });
 map.addLayer(cloudmade).setView(new L.LatLng(41.52, -71.09), 13);


 });

any help much apreciated

解决方案

I think what is happening is that, when the map is created, the container width/height for your `map-canvas' element has not yet been adjusted to the width/height of the modal dialog. This causes the map size to be incorrect (smaller) than what it should be.

You can fix this by calling map.invalidateSize(). This will work to re-adjust the width/height bounds of the L.Map's container.

You can automatically call this by hooking into the event where the Bootstrap modal becomes shown.

$('#myModal').on('show.bs.modal', function(){
  setTimeout(function() {
    map.invalidateSize();
  }, 10);
 });

Insert this code into your JavaScript. When the modal is shown, the map will then invalidate its size. The timeout is because there may be some animation/transition time for the modal to display and be added to the DOM.

这篇关于传单地图在引导程序 3.0 模式中未正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-16 00:25
Powered by LMLPHP ©2024 传单地图在引导程序 0.046951