Question

我为即将到来的足球世界杯创建了一个小网站。该网站包含一个地图（由mapbox提供），这是我网站中最重要的元素，因此它是网站的背景。宽度设置为100％。现在我想根据设备（平板电脑，手机）调整地图大小，以便地图和整个网站在每个设备上看起来相似。

以下是我的javascript：

的代码段

var map = L.mapbox.map('map', 'hashtagwinti.i72di96c', { 
zoomControl: false, 
maxZoom: 10, 
minZoom: 2, 
} )
.setView([-8, -50], 4); 
L.control.scale({position: 'bottomleft', metric: true, imperial:false}).addTo(map);
map.featureLayer.setGeoJSON(brazil).addTo(map);

这是我的身体和地图的css：

body { 
margin:0; 
padding:0; 
width:auto% !important;
height: auto% !important;
}

#map { 
position:absolute; 
top:0; 
bottom:0;
width:100%;

现在我希望每个设备上的地图视图都是一样的。如果您从例如iPhone上访问网站，目前缩放级别不会改变（地图视图不相同）。

任何想法？

（如果已经在mapbox API上寻找解决方案，但我没有找到解决方案）

Answer 1

您可以通过媒体查询类型调用告诉Mapbox您要调整哪个屏幕大小，并使用if / else语句为该大小执行不同的操作。

例如，要为手机屏幕尺寸设置小于420像素的缩放级别，它应该是这样的：

var mq = window.matchMedia( "(min-width: 420px)" );

if (mq.matches){
    var map = new L.mapbox.map('map', 'hashtagwinti.i72di96c').setView([-8, -50], 4); //set map zoom level for desktop size
} else {
    var map = new L.mapbox.map('map', 'hashtagwinti.i72di96c').setView([-8, -50], 3); //set map zoom level for mobile size
};

您可以将其他内容设置为地图中心，标记等。

Answer 2

我发现使用map.invalidateSize();最简单的解决方案来根据浏览器窗口或父容器的大小调整地图大小。

以下是MapBox网站上有关invalidateSize的更多信息：https://www.mapbox.com/help/why-map-cropped-hidden-shown/

如何根据设备宽度调整地图大小？

2 个答案: