使用maxBounds在包含angular-leaflet-directive的Leaflet中停止平移

現在我已經運行了AngularJS應用程序，我試圖按照this Mapbox document中所述限制LeafletJS地圖平移。問題是我正在使用angular-Leaflet-directive，並且使用我的AngularJS模板中的leaflet指令編寫現有的代碼來創建地圖。因此，現有的地圖是按照這種方式定義：使用maxBounds在包含angular-leaflet-directive的Leaflet中停止平移

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

我如何的getBounds（）和setMaxBounds（）在這樣的情況下，我在那裏從來沒有明確地對新L.通話地圖（'leaflet'，{...}））？

來源

2016-10-24 Dave Aiello

您的片段不能正常工作 – Manuel

是的，我同意。如果沒有在控制器中支持代碼，傳單指令將不起作用。我只是試圖說明我如何在生產中使用傳單指令。 –

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/[email protected]/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/[email protected]/dist/leaflet.js"></script> 
 

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

來源

2016-11-06 17:57:19

對不起，我沒有迴應你的答案。我非常感謝幫助。在我的應用程序中，我正在用代表主要興趣點的中心中的單個標記繪製地圖。在給定已知中心點的情況下，如何計算東北和西南邊界？ –

使用maxBounds在包含angular-leaflet-directive的Leaflet中停止平移

回答

相關問題