Question

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

<!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工作）

Answer 1

我认为你有几个选择......其中一个是......

将此添加到您的控制器：

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>

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

Answer 2

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

HTML：

val ranges = scala.io.Source.fromInputStream(getClass.getResourceAsStream("/ranges.tsv")).getLines
val transactions = scala.io.Source.fromInputStream(getClass.getResourceAsStream("/transactions.tsv")).getLines

JS：

<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>

让我知道......

AngularJS和Leaflet映射居中绑定到ng-repeat迭代变量

2 个答案: