Mapbox调整大小

我想调整它的容器的大小后调整大小的地图。拨打invalidateSize()后地图不会调整。在这个例子中，我希望地图缩小到新的容器大小。我做了一个简单的测试用例角：Mapbox调整大小

的Index.html：

<div class="container-fluid" ng-controller="testCtrl"> 
    <div class="row"> 
     <div class="col-xs-12" ng-class="{'smaller': timedOut}"> 
      <mapbox map-id="jonfor.cifpucu09j2jos4m7h7dts4ek"></mapbox> 
     </div> 
    </div> 
</div>

Controller.js：

testController.controller('testCtrl', ['$scope', 'mapboxService', '$timeout', function ($scope, mapboxService, $timeout) { 
    mapboxService.init({accessToken:'pk.eyJ1Ijoiam9uZm9yIiwiYSI6ImNpZnB1Y3Y0OGh0NnJyN2x4OHFqNzdoajUifQ.vg3xNMJH-RgzRAZF7RzhzQ'}); 
    $timeout(function() { 
     $scope.timedOut = true; 
     var map = mapboxService.getMapInstances()[0]; 
     map.invalidateSize(); 
     console.log("Timeout"); 
    }, 3000); 
}]);

App.css：

.smaller { 
    width : 100px; 
}

我也有把项目放在GitHub上：https://github.com/Jonfor/MapBoxTest

来源

2015-10-19 Jonfor

编辑：

您使用实例化与default width of 500px地图如果宽度最初未指定（通过属性width="100"）Angular Mapbox Directive。

你可以通过指定width="dummyValue"来欺骗它，这样它就不会在地图容器上设置硬宽度，后者可以使用其父容器宽度进行调整，包括稍后通过CSS类修改它。

此外：

你应该阅读以前的地图范围您做出宽度改变之前。
在调用invalidateSize()和fitBounds()方法之前，您必须使用嵌套超时来为添加的CSS类生效（可能需要重新发生流动），以便在父容器宽度上生效。

HTML：

<mapbox map-id="jonfor.cifpucu09j2jos4m7h7dts4ek" width="dummyValue"> 
</mapbox>

的JavaScript：

$timeout(function() { 
    //$scope.timedOut = true; 
    var map = mapboxService.getMapInstances()[0]; 
    var bounds = map.getBounds(); 
    $scope.timedOut = true; 

    $timeout(function() { 
     map.invalidateSize(); 
     map.fitBounds(bounds); 
    }, 0); 

    console.log("Timeout"); 
}, 2000);

复制你的代码Plunker与实施的修改：（！以https让你开心:-)）https://plnkr.co/edit/S91zxHYIxnZ72bSwyxXs?p=preview

原始回答：

我假设您希望地图调整其缩放级别，以便在调整容器大小后可以看到相同的内容？

在这种情况下，您可以在致电map.invalidateSize()之前记住map.getBounds()，然后请求map.fitBounds()将其调整为先前的内容。

演示：http://jsfiddle.net/ve2huzxw/3/

的fitBounds方法，将尽最大努力具有相同的内容至少可见。如果新的集装箱比例不同，则更多区域也将可见。而且由于它必须使用整数缩放级别，因此可能必须缩小比所需更多（如果缩小容器），或者根本不缩放（如果仅在一个维度上扩展容器）。

只是备案，map.invalidateSize()只是一个实用工具，让小叶考虑到瓷砖装载的新容器大小（它不会加载离容器内部太远的瓷砖）和矢量绘图等。它不会在视觉上改变任何东西。尝试增加容器大小未调用此功能并看到“空白”区域。

来源

2015-10-27 19:12:21 ghybs

在你的例子中，你直接修改宽度。这就是它工作的原因。当我通过外部样式表修改宽度时，我的更改不会生效。 – Jonfor

我看到你正在使用[Angular Mapbox Directive]（http://licyeus.github.io/angular-mapbox/）。你对它有多熟悉，可能还有[Angular Leaflet Directive]（https://tombatossals.github.com/angular-leaflet-directive）？我会更新上面的答案。 – ghybs

是的！虚拟值是完美的。正是我所需要的。 – Jonfor

Mapbox调整大小

回答

相关问题