正确实现 invalidateSize() 以在移动设备上显示地图框/传单答案

【问题标题】：proper implementation of invalidateSize() to display mapbox/leaflet on mobile device正确实现 invalidateSize() 以在移动设备上显示地图框/传单
【发布时间】：2015-05-06 05:57:20
【问题描述】：

我提出了一个关于引导传单地图未在移动设备上显示的问题How can I fix bootstrap leaflet map mobile display?

从那以后，我使用了一个简单的 mapbox 模板作为地图，并使用了此处所述的 invalidateSize() https://www.mapbox.com/help/why-map-cropped-hidden-shown/

但仍然无法将地图显示在手机上。

谁能帮助我正确实施 invalidateSize()？

谢谢巴里

只有一个 div 元素：

<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('&copy; <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();

这就是所有的css：

    <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>

【问题讨论】：

标签： mobile maps leaflet mapbox window-resize

【解决方案1】：

$('map') 上的样式是什么样的？我看到了您的内联 CSS，但上面还有其他内容吗？尝试给它一个大小，以确保其他一切都先正常工作。

另外，如果您使用任何类型的 CSS 动画来调整地图容器的大小，则需要等到动画完成后，例如：

window.setTimeout(function() {
    map.invalidateSize();
}, 1000);

【讨论】：

感谢您的回复！ @jyoung css 已添加到原始帖子中。尝试了您的建议，但同样的事情不断发生。地图在桌面浏览器中完美显示。但在我的 iPhone 上，只显示控件，不显示地图。

【解决方案2】：

为什么不从你能从那里得到和去的最基本的地图开始。首先检查下面发布的代码是否有效，然后将其更改为您的token en mapid，再次测试，添加图层控件，再次测试等。一次添加一个功能并继续测试，您会很容易发现哪里出错了.如果没有完整的代码和 Plunker 或 JSfiddle 或其他我们可以测试的地方的适当测试用例，目前很难猜测。

<!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>

取自：https://www.mapbox.com/mapbox.js/example/v1.0.0/

【讨论】：

开始尝试这种方法，即简单的地图，然后向更复杂的方向发展。 jsfiddle 是here。还是一样的结果。适用于桌面/笔记本电脑浏览器，但不适用于我的 iphone。甚至我的手机上的小提琴都没有。 @iH8
那个小提琴对我不起作用，因为你正在从 HTTPS 运行小提琴，并且 tilelayers URL 使用 HTTP，这会在你的控制台中给你一个很好的混合内容错误。将切片层 URL 更改为 HTTPS 也不起作用，因为您从中加载切片的服务器会引发 ERR_SSL_PROTOCOL_ERROR。您在这里有两个选项 1) 从 HTTP 运行，2) 正确设置您的 tileserver 以运行 SSL。附言。您看到控件而没有瓷砖的事实是您的瓷砖层出现问题的一个死胡同。
谢谢@iH8。有趣的是，在查看大小从桌面切换到移动之前，调用磁贴的方式（包括 http/https）不会出现问题。将尝试另一个磁贴服务器设置，并让您知道它是如何工作的。
提示：在您的脚本中使用协议相关（也称为无协议）URL，所有浏览器都支持（据我所知）。省略HTTP: 或HTTPS:，只使用//。浏览器会根据加载文档的 URL 来判断使用什么。这样，无论您是从 HTTP 还是 HTTPS 加载脚本，您的脚本都将始终有效。
地图现在可以使用了。问题是http/https。有两件事必须改变。 1）最初调用瓦片和相关php脚本的方法，我使用tileserver.php调用'Streets'：L.tileLayer（'[url]url/[mbtiles文件名].tilejson'现在我使用mbtiles- server.php 调用 'Streets':L.tileLayer("[url]/mbtiles-server.php?db=[mbtiles 文件名].mbtiles&z={z}&x={x}&y={y}.png" ) php 脚本必须与 mbtiles 文件位于同一文件夹/目录中。用您自己的替换 [] 中的文本 2) 仅传单，没有 mapbox，因为 api 使用安全密钥再次感谢@ iH8！干得好！

【解决方案3】：

地图现在可以工作了。

问题是 http/https。有两件事必须改变。

1) 调用tiles和相关php脚本的方法一开始我是用tileserver.php来调用的

'Streets':L.tileLayer('[url]url/[mbtiles file name].tilejson'

现在我正在使用 mbtiles-server.php 调用

'Streets':L.tileLayer("[url]/mbtiles-server.php?db=[mbtiles file name].mbtiles&z={z}&x={x}&y={y}.png")

注意：php 脚本必须与 mbtiles 文件位于同一文件夹/目录中。另外，将 [] 中的文本替换为您自己的

2) 仅使用小册子 css/js，没有 mapbox，因为 api 使用安全密钥

再次感谢@iH8 的出色工作！

【讨论】：