Mobile 在移动设备上正确实现invalidateSize（）以显示地图盒/传单
我开始问一个关于引导传单地图不显示在移动设备上的问题 从那以后，我使用了一个简单的mapbox模板作为映射，并使用了invalidateSize（），如下所述 但还是没办法让地图显示在手机上 有人能帮助我正确实现invalidateSize（）吗 谢谢 巴里 有一个单独的div元素：Mobile 在移动设备上正确实现invalidateSize（）以显示地图盒/传单,mobile,maps,leaflet,mapbox,window-resize,Mobile,Maps,Leaflet,Mapbox,Window Resize,我开始问一个关于引导传单地图不显示在移动设备上的问题 从那以后，我使用了一个简单的mapbox模板作为映射，并使用了invalidateSize（），如下所述 但还是没办法让地图显示在手机上 有人能帮助我正确实现invalidateSize（）吗 谢谢 巴里 有一个单独的div元素： <div id='map' class='blue'></div> 这是剧本： <script> L.mapbox.accessToken = 'mytoken'; var
<div id='map' class='blue'></div>
<script>
L.mapbox.accessToken = 'mytoken';
var map = L.map('map').setView([10.5063,-61.4079], 10);
map.attributionControl.setPrefix('© <a href="http://www.url.com">Copyright 2015. hellO!</a>');
L.control.locate().addTo(map);
L.control.layers(
{'Streets': L.mapbox.tileLayer('url').addTo(map)},
{
'Drive Times': L.mapbox.tileLayer('url'),
'Outlets': L.mapbox.tileLayer('url')
}
).addTo(map);
//attempt to force resize on mobile devices
$('map').show();
map.invalidateSize();
L.mapbox.accessToken='mytoken'；
var map=L.map（'map'）.setView（[10.5063，-61.4079]，10）；
map.attributeControl.setPrefix（'©；'）；
L.control.locate（）.addTo（map）；
控制层(
{'Streets'：L.mapbox.tillelayer（'url'）.addTo（map）}，
{
“驱动器时间”：L.mapbox.tileLayer（'url'），
'Outlets'：L.mapbox.tillelayer（'url'）
}
).addTo（地图）；
//尝试在移动设备上强制调整大小
$（'map'）.show（）；
map.invalidateSize（）；
<style>
.menu-ui {background:#fff; position:absolute; bottom:10px;right:10px; left:10px; z-index:1; border-radius:3px; width:auto; height:inherit; border:1px solid rgba(0,0,0,0.4);}
.menu-ui a { font-size:11px; color:#404040; display: inline-block; margin:0;padding:0; padding:10px; text-decoration:none; border-right: 2pt inset; border-right-color:0.5px solid rgba(0,0,0,0.25); text-align: left;}
.menu-ui a:first-child { border-radius:3px 3px 0 0; }
.menu-ui a:last-child { border:none; border-radius:0 0 3px 3px; }
.menu-ui a:hover { background:#f8f8f8; color:#404040; }
.menu-ui a.active { background:#3887BE; color:#FFF; }
.menu-ui a.active:hover { background:#3074a4; }
.menu-ui a.inactive { background:#FFF; color:#3887BE; }
.leaflet-control-locate {border: 1px solid rgba(0,0,0,0.4);}
.leaflet-control-locate a {background-color: #fff;background-position: -3px, -2px;}
.leaflet-control-locate.active a {background-position: -33px -2px;}
.leaflet-popup-content { margin-top: 2px; margin-bottom: 2px; margin-left: 2px; margin-right: 2px;}
.leaflet-popup-content-wrapper {border-radius: 2px;}
.legend label, .legend span { display:block; float:left; height:15px; width:20%; text-align:center; font-size:9px; color:#808080;}
.leaflet-control-layers label { font-weight: normal; margin-bottom: 0px;}
.legend label, .legend span { display:block; float:left; height:15px; width:20%; text-align:center; font-size:9px; color:#808080;}
</style>
.菜单ui{background:#fff；位置：绝对；底部：10px；右侧：10px；左侧：10px；z索引：1；边框半径：3px；宽度：自动；高度：继承；边框：1px实心rgba（0,0,0,0.4）；}
.menu ui a{font size:11px；颜色：#404040；显示：内嵌块；边距：0；填充：0；填充：10px；文本装饰：无；右边框：2pt插入；右边框颜色：0.5px实心rgba（0,0,0,0.25）；文本对齐：左；}
.menu ui a:第一个子项{边界半径：3px 3px 0；}
.menu ui a:最后一个子项{边框：无；边框半径：0 0 3px 3px；}
.menu ui a:悬停{背景：#F8F8；颜色：#404040；}
.menu ui a.active{背景：#3887BE；颜色：#FFF；}
.menu ui a.active:悬停{背景：#3074a4；}
.menu ui a.inactive{背景：#FFF；颜色：#3887BE；}
.传单控制定位{边框：1px实心rgba（0,0,0,0.4）；}
.传单控件定位{背景颜色：#fff；背景位置：-3px，-2px；}
.传单-control-locate.active a{背景位置：-33px-2px；}
.传单弹出内容{页边距顶部：2px；页边距底部：2px；页边距左侧：2px；页边距右侧：2px；}
.传单弹出内容包装{边框半径：2px；}
.legend标签，.legend span{显示：块；浮动：左；高度：15px；宽度：20%；文本对齐：居中；字体大小：9px；颜色：#808080；}
.传单控制层标签{字体重量：正常；页边距底部：0px；}
.legend标签，.legend span{显示：块；浮动：左；高度：15px；宽度：20%；文本对齐：居中；字体大小：9px；颜色：#808080；}
window.setTimeout(function() {
map.invalidateSize();
}, 1000);
为什么不从你能得到的最基本的地图开始，然后从那里开始呢。首先检查下面发布的代码是否有效，然后将其更改为您的令牌en mapid，再次测试，添加layercontrol，再次测试等。一次添加一个功能并继续测试，您将很容易发现错误所在。如果没有完整的代码和在Plunker或JSFIDLE上的适当测试用例，或者其他我们可以测试它的地方，现在很难猜测
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoicGF1bC12ZXJob2V2ZW4iLCJhIjoiZ1BtMWhPSSJ9.wQGnLyl1DiuIQuS0U_PtiQ';
var map = L.mapbox.map('map', 'examples.map-i86nkdio').setView([40, -74.50], 9);
</script>
</body>
</html>
简单的地图
正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
L.mapbox.accessToken='pk.eyj1ijoicgf1bc12zxjob2v2zw4ilcjhijoiz1btmwhpsj9.wQGnLyl1DiuIQuS0U_PtiQ'；
var map=L.mapbox.map（'map'，'examples.map-i86nkdio'）.setView（[40，-74.50]，9）；
'Streets':L.tileLayer('[url]url/[mbtiles file name].tilejson'
'Streets':L.tileLayer("[url]/mbtiles-server.php?db=[mbtiles file name].mbtiles&z={z}&x={x}&y={y}.png")
'Streets':L.tileLayer('[url]url/[mbtiles file name].tilejson'
'Streets':L.tileLayer("[url]/mbtiles-server.php?db=[mbtiles file name].mbtiles&z={z}&x={x}&y={y}.png")
再次感谢@iH8的出色工作 谢谢回复@jyoung css已添加到原始帖子中。我试过你的建议，但同样的事情不断发生。地图在桌面浏览器中完美显示。但在我的iphone上，只有控件显示，而不是地图。我开始尝试这种方法，即简单地图，然后转向更复杂的方法。JSFIDLE是。还是一样的结果。适用于台式机/笔记本电脑浏览器，但不适用于我的iphone。甚至连我手机上的小提琴都没有显示出来@IH8Fiddle对我不起作用，因为您正在从HTTPS和tilelayers URL的use HTTP运行fiddle，这在控制台中给了您一个很好的混合内容错误。将tilelayer URL更改为HTTPS也不起作用，因为从中加载Tile的服务器会抛出ERR_SSL_PROTOCOL_错误。这里有两个选项1）从HTTP运行，2）正确设置tileserver以运行SSL。另外，事实上，你看到的是控件，没有瓷砖是一个死亡的赠品，说明你的瓷砖工人有问题。谢谢@iH8。有趣的是，在查看大小从桌面切换到移动设备之前，瓷砖的调用方式（包括http/https）不会出现问题。将尝试另一个磁贴服务器设置，并让您知道它是如何工作的。提示：在脚本中使用相对协议（也称为protocolless）URL，所有浏览器都支持它（据我所知）。省略
HTTP:HTTPS:/