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調整大小

回答

相關問題