Центрирование карты AngularJS и Leaflet связано с итерационной переменной ng-repeat

Я пытаюсь привязать атрибут центра листовки к модели следующим образом:

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

Однако это не работает. Только когда я удаляю атрибут center, я получаю карты, но тогда они не центрируются, т.е.

<leaflet width="300px" height="300px"></leaflet>

Может ли кто-нибудь помочь в этом, не меняя общую структуру полностью.

(Заранее извиняюсь: я не смог заставить пример работать ни на Plunker, ни на Fiddle, хотя он отлично работает во всех моих браузерах)

Источник

2 ответа

Решение

Поэтому я решил сделать макет и протестировать несколько вещей. Это работает для меня...

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

Дай мне знать...

Источник

Я думаю, у вас есть пара вариантов... один из которых это...

Добавьте это к вашему контроллеру:

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

Вам также может понадобиться сделать это (по https://github.com/tombatossals/angular-leaflet-directive):

"Если вы хотите иметь более одной карты на странице и иметь доступ к соответствующим объектам карты, добавьте атрибут id в директиву листовки в HTML:"

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

Дайте мне знать, как далеко вы зашли... и мы пойдем оттуда.

Источник
Другие вопросы по тегам