Question

我希望将Mapbox地图放入容量为X，Y的容器中。然后我需要一个滑块，当调整时，它将同时调整div的大小并以相反的比例缩放地图。这可能听起来像是在地图上简单放大，但所需的效果是div看起来保持相同的大小，但是地图的更宽部分进入视野，同时在地图上保持相同的缩放级别，实际上我是加宽地图的视口，但保持页面上容器的视口大小相同。

我对实施的初步想法是这样的：

    #map{ width: 250px; height: 250px; }

然后滑块输入值为.5，我们会执行一个变换：规模（0.5）; 同时将div增加到500px，500px

如果有人有想法，我在这里创建了测试平台：http://jsfiddle.net/cdubbs/91uj9ce7/

这样的事情是否可能？或者是否有另一种方法可以做到这一点（无论是执行速度更快还是更广泛兼容）？

Answer 1

我不会撒谎......这个解决方案有点像“黑客” - 但是它有效。

更新：现在可以使用Firefox＆amp; IE（仅在IE11上测试）

DEMO： http://jsfiddle.net/hopkins_matt/91uj9ce7/13/

HTML：

<div id="map" style="width: 250px; height: 250px;"></div>

<input type="range" min="10" max="100" value="100" class="scale" step="1" oninput="scaleMap(value)" onchange="scaleMap(value)" id="scale">
<output for="fader" id="percentage">100</output>

JS：

mapboxgl.accessToken = '* insert access token *';
var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'https://www.mapbox.com/mapbox-gl-styles/styles/outdoors-v7.json', //stylesheet location
  center: [40, -74.50], // starting position
  zoom: 9 // starting zoom
});

function scaleMap(percentage) {
    document.querySelector('#percentage').value = percentage;
    var mapDiv = document.getElementById("map");
    var initialWidth = mapDiv.offsetWidth;
    var initialHeight = mapDiv.offsetHeight;
    var mapCanvas = document.getElementsByTagName("canvas");
    function divSize(multiplier) {
        return (100 / percentage) * multiplier;
    }
    var mapScale = (percentage / 100);
    mapDiv.style.width = divSize(initialWidth) + "px";
    mapDiv.style.height = divSize(initialHeight) + "px";
    mapCanvas[0].style.width = divSize(initialWidth) + "px";
    mapCanvas[0].style.height = divSize(initialHeight) + "px";
    mapCanvas[0].width = divSize(initialWidth);
    mapCanvas[0].height = divSize(initialHeight);
    map.resize();
    mapCanvas[0].style.transform = "scale(" +mapScale+")";
    mapCanvas[0].style.marginLeft = (((divSize(initialWidth) - initialWidth) / 2) * -1) + "px";
    mapCanvas[0].style.marginTop = (((divSize(initialHeight) - initialHeight) / 2) * -1) + "px";
    document.getElementById("map").style.width = initialWidth + "px";

CSS：

#map {
    overflow: hidden;
    position:relative;
}

#map div canvas {
    padding: 0;
    margin: auto;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

在转换内容时调整容器大小

1 个答案: