AngularJS 和 Leaflet 地图居中绑定到 ng-repeat 迭代变量
AngularJS and Leaflet map centering bound to ng-repeat iteration variable
我正在尝试将传单的中心属性绑定到模型,如下所示:
<!DOCTYPE html>
<html>
<title>Test Leaflet</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script src="angular-leaflet-directive.min.js"></script>
<script src="map.js"></script>
<body ng-app="mapApp" ng-controller="mapCtrl">
<ul>
<li ng-repeat="m in maps | orderBy:'ident':false">
<div>
{{m.ident}}
<leaflet center="{{m.center}}" width="300px" height="300px"></leaflet>
</div>
</li>
</ul>
</body>
</html>
与 JavaScript:
var mapApp = angular.module('mapApp', ['leaflet-directive']);
mapApp.controller('mapCtrl', ['$scope', function($scope, $http)
{
$scope.maps = [
{ ident: "MAP1", center: { lat: 45, lng: 90, zoom: 10 } },
{ ident: "MAP2", center: { lat: -45, lng: -90, zoom: 10 } },
{ ident: "MAP3", center: { lat: 45, lng: -90, zoom: 10 } },
{ ident: "MAP4", center: { lat: -45, lng: 90, zoom: 10 } }
];
}]);
但是这不起作用。只有在删除中心属性后,我才能获得地图,但它们不会居中,即:
<leaflet width="300px" height="300px"></leaflet>
任何人都可以在不完全改变整体结构的情况下协助完成这项工作。
(提前道歉:我无法让示例在 Plunker 或 Fiddle 上运行,尽管它在我所有的浏览器中都运行良好)
我想你有几个选择...其中一个是这个...
将此添加到您的控制器:
angular.extend($scope, {
center: {
lat: 51.505,
lng: -0.09,
zoom: 4
}
});
您可能还需要这样做(根据 https://github.com/tombatossals/angular-leaflet-directive):
"If you want to have more than one map on the page and access their respective map objects, add an id attribute to your leaflet directive in HTML:"
<leaflet id="mymap" lf-center="center" height="480px" width="640px"></leaflet>
让我知道你能走多远...我们将从那里开始。
所以我决定模拟它并测试一些东西。这对我有用...
HTML:
<ul>
<li ng-repeat="m in maps | orderBy:'ident':false">
<div>
{{m.ident}}
<leaflet id="{{m.ident}}" center="m.center" width="300px" height="300px"></leaflet>
</div>
</li>
</ul>
JS:
$scope.center = {center: { lat: 45, lng: 90, zoom: 1 }};
$scope.maps = [
{ ident: "MAP1", center: { lat: -45, lng: -90, zoom: 18 } },
{ ident: "MAP2", center: { lat: -45, lng: -90, zoom: 14} },
{ ident: "MAP3", center: { lat: -45, lng: -90, zoom: 10} },
{ ident: "MAP4", center: { lat: -45, lng: -90, zoom: 6 } }
];
让我知道...
我正在尝试将传单的中心属性绑定到模型,如下所示:
<!DOCTYPE html>
<html>
<title>Test Leaflet</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script src="angular-leaflet-directive.min.js"></script>
<script src="map.js"></script>
<body ng-app="mapApp" ng-controller="mapCtrl">
<ul>
<li ng-repeat="m in maps | orderBy:'ident':false">
<div>
{{m.ident}}
<leaflet center="{{m.center}}" width="300px" height="300px"></leaflet>
</div>
</li>
</ul>
</body>
</html>
与 JavaScript:
var mapApp = angular.module('mapApp', ['leaflet-directive']);
mapApp.controller('mapCtrl', ['$scope', function($scope, $http)
{
$scope.maps = [
{ ident: "MAP1", center: { lat: 45, lng: 90, zoom: 10 } },
{ ident: "MAP2", center: { lat: -45, lng: -90, zoom: 10 } },
{ ident: "MAP3", center: { lat: 45, lng: -90, zoom: 10 } },
{ ident: "MAP4", center: { lat: -45, lng: 90, zoom: 10 } }
];
}]);
但是这不起作用。只有在删除中心属性后,我才能获得地图,但它们不会居中,即:
<leaflet width="300px" height="300px"></leaflet>
任何人都可以在不完全改变整体结构的情况下协助完成这项工作。
(提前道歉:我无法让示例在 Plunker 或 Fiddle 上运行,尽管它在我所有的浏览器中都运行良好)
我想你有几个选择...其中一个是这个...
将此添加到您的控制器:
angular.extend($scope, {
center: {
lat: 51.505,
lng: -0.09,
zoom: 4
}
});
您可能还需要这样做(根据 https://github.com/tombatossals/angular-leaflet-directive):
"If you want to have more than one map on the page and access their respective map objects, add an id attribute to your leaflet directive in HTML:"
<leaflet id="mymap" lf-center="center" height="480px" width="640px"></leaflet>
让我知道你能走多远...我们将从那里开始。
所以我决定模拟它并测试一些东西。这对我有用...
HTML:
<ul>
<li ng-repeat="m in maps | orderBy:'ident':false">
<div>
{{m.ident}}
<leaflet id="{{m.ident}}" center="m.center" width="300px" height="300px"></leaflet>
</div>
</li>
</ul>
JS:
$scope.center = {center: { lat: 45, lng: 90, zoom: 1 }};
$scope.maps = [
{ ident: "MAP1", center: { lat: -45, lng: -90, zoom: 18 } },
{ ident: "MAP2", center: { lat: -45, lng: -90, zoom: 14} },
{ ident: "MAP3", center: { lat: -45, lng: -90, zoom: 10} },
{ ident: "MAP4", center: { lat: -45, lng: -90, zoom: 6 } }
];
让我知道...