AngularJS 和 Leaflet 地图居中绑定到 ng-repeat 迭代变量答案

【问题标题】：AngularJS and Leaflet map centering bound to ng-repeat iteration variableAngularJS 和 Leaflet 地图居中绑定到 ng-repeat 迭代变量
【发布时间】：2016-02-15 12:40:48
【问题描述】：

我正在尝试将传单的中心属性绑定到模型，如下所示：

<!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 上运行，即使它在我所有的浏览器中都可以正常工作）

【问题讨论】：

标签： angularjs leaflet angular-leaflet-directive

【解决方案1】：

所以我决定模拟它并测试一些东西。这对我有用...

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 } }
  ];

让我知道...

【讨论】：

【解决方案2】：

我认为您有几个选择...其中之一就是这个...

将此添加到您的控制器：

angular.extend($scope, {
    center: {
        lat: 51.505,
        lng: -0.09,
        zoom: 4
    }
});

您可能还需要这样做（根据https://github.com/tombatossals/angular-leaflet-directive）：

"如果您想在页面上拥有多个地图并访问它们各自的地图对象，请在 HTML 中的传单指令中添加一个 id 属性："

<leaflet id="mymap" lf-center="center" height="480px" width="640px"></leaflet>

让我知道这能让你走多远......我们会从那里开始。

【讨论】：

我认为我的问题的症结在于，尽管传单指令声称是传单的角度整合，但实际上并非如此，也没有真正的双向数据绑定。使用“中心”扩展控制器并不能真正解决我的问题，因为我需要中心随每个地图实例而变化。我已经尝试了自行访问每个实例的路线，但它确实被黑客入侵，因为 ng-repeat 的超时仅在应用程序生命周期内更新一次，因此您需要求助于技巧，例如在过滤器处理程序中进行更新以获得真正的数据绑定更新动态的。