使用 maxBounds 停止在带有 angular-leaflet-directive 的 Leaflet 中平移

Question

现在我有了我的 AngularJS 应用程序运行，我正在尝试限制 LeafletJS 地图平移，如 this Mapbox document 中所述。问题是我正在使用 angular-leaflet-directive，并且我编写了现有代码以使用 AngularJS 模板中的 leaflet 指令创建地图。所以现有地图是以这种方式定义的：

<leaflet id="mymap" markers="markers" center="center" width="100%" height="380px"></leaflet>

在这种情况下，我如何 getBounds() 和 setMaxBounds()，我从未明确调用 new L.map('leaflet', {...}))？

Answer 1

bounds 和 maxBounds 属性可以通过 angular-leaflet-directive 分别使用 maxBounds 和 bounds 指令设置，例如：

<leaflet markers="markers" maxbounds="boundsInfo" bounds="boundsInfo"></leaflet>

应按以下格式指定范围：

$scope.boundsInfo = {'northEast': {'lat': 40.774, 'lng': -74.125},'southWest': {'lat': 40.712, 'lng': -74.227}};

例子

angular.module("demoapp", ["leaflet-directive"])
    .controller("CustomizedMarkersController", ['$scope','leafletData', function ($scope, leafletData) {

       
        $scope.boundsInfo = {'northEast': {'lat': 40.774, 'lng': -74.125},'southWest': {'lat': 40.712, 'lng': -74.227}};
        $scope.markers = [];

        leafletData.getMap().then(function (map) {
         
            console.log(map.getBounds());
        });

    }]);

.angular-leaflet-map {
    width: 640px;
    height: 480px;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://code.angularjs.org/1.2.2/angular.js"></script>
<script type="text/javascript" src="https://tombatossals.github.io/angular-leaflet-directive/dist/angular-leaflet-directive.js"></script>
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>

<div ng-app="demoapp" ng-controller="CustomizedMarkersController">
    <leaflet markers="markers" maxbounds="boundsInfo" bounds="boundsInfo" maxZoom="19" minZoom="10"></leaflet>
</div>

使用 maxBounds 停止在带有 angular-leaflet-directive 的 Leaflet 中平移

Using maxBounds to stop panning in Leaflet with angular-leaflet-directive

angularjs

leaflet

angular-leaflet-directive