正确实施 invalidateSize() 以在移动设备上显示 mapbox/leaflet

Question

我提出了一个关于 bootstrap 传单地图未在移动设备上显示的问题

从那时起，我就使用了一个简单的 mapbox 模板来绘制地图，并使用了 invalidateSize() 概述 https://www.mapbox.com/help/why-map-cropped-hidden-shown/

但仍然无法在移动设备上显示地图 phone。

任何人都可以帮助我正确实施 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>

Answer 1

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

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

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

Answer 2

为什么不从您可以获得的最基本的地图开始呢？首先检查下面发布的代码是否有效，然后将其更改为您的 token en mapid，再次测试，添加 layercontrol，再次测试等。一次添加一个功能并继续测试，您会很容易地找出问题所在.如果没有您的完整代码和 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/

Answer 3

地图现在可以使用了。

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

1) 调用磁贴的方法和关联的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 文件位于同一 folder/directory 中。另外，将 [] 中的文本替换为您自己的

2) 仅使用传单 css/js，没有 mapbox，因为 api 使用安全密钥

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

正确实施 invalidateSize() 以在移动设备上显示 mapbox/leaflet

proper implementation of invalidateSize() to display mapbox/leaflet on mobile device

mobile

maps

leaflet

mapbox

window-resize