使用 scope 作为 id 在 Leaflet 中创建地图

Question

鉴于我使用 ng-repeat，它允许我为每个项目使用 $index，我尝试使用此属性为 ng-repeat

中的每个项目创建一个地图

查看

 <div map-directive id="map{{$index}}" name="'map' + [$index]" class="mapContainers">
 </div>

所以现在 id 是 map0、map1 等等。

指令

    var map = L.map(scope.name, {
                        center: [40.766964, -73.930453],
                        zoom: 4,
                        layers: [BaseMap]
                    });

在指令 scope.name 中包含唯一 ID。

我发现地图只有在更改字符串范围后才能工作

    var map = L.map('map', {
                        center: [40.766964, -73.930453],
                        zoom: 4,
                        layers: [BaseMap]
                    });

也许有人遇到过类似的问题。

Answer 1

当您可以简单地使用由 link 方法提供的指令的 element 属性时，为什么还要特意使用 ID？它的存在是有原因的，也可以使用它：

angular.module('app', [
  'ui.router'
]);

angular.module('app').config([
  '$stateProvider',
  '$urlRouterProvider',
  function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider.state('root', {
      'url': '/',
      'controller': ['$scope', function ($scope) {
          $scope.maps = ['a', 'b', 'c', 'd'];
      }],
      'template': '<div map-directive ng-repeat="map in maps" class="map"></div>'
    });
  }
]);

angular.module('app').directive('mapDirective', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var map = L.map(element[0], {
        center: [0, 0],
        zoom: 1,
        layers: [
          L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
            maxZoom: 18
          })  
        ]
      });
    }
  };
});

工作起来很有魅力：http://plnkr.co/edit/toZByf9QSletY5erXID7?p=preview

我将尝试解释此处实际发生的情况。如果使用模板字符串添加 ID：

<div map-directive ng-repeat="map in maps" id="map_{{$index}}" class="map"></div>

指令link（前或post，无关紧要）函数被执行：

'link': function (scope, element, attrs) {
    console.log(element[0]);
    console.log(attr.id);
}

此处attrs.idreturnsmap_0为ng-repeat中的第一个元素，太棒了。我们有身份证。但是此时 element[0]（已创建的实际元素）仍然是 returns：div#map_{{$index}}.map。因此，如果您告诉 L.Map 使用 map_0 作为元素 ID，尽管该元素已经存在于 DOM 中，但该 ID 尚未被解析，因此 L.Map 会抛出您找不到元素的错误：Map container not found.

方法是使用 element 属性，它包含实际元素的引用并且 L.Map 也接受它，正如您从它的签名中看到的那样：

L.map( <HTMLElement|String> id, <Map options> options? )

http://leafletjs.com/reference.html#map-l.map

如果您为实际元素分配一个引用（既然您已经得到了它，为什么不呢？）它使 L.Map 不必为 ID 执行 DOM 查找，所以这就是甚至更好。如果您出于 CSS 目的或其他目的需要它，您仍然可以分配 ID，只是在指令中没有用于此目的。

使用 scope 作为 id 在 Leaflet 中创建地图

Use scope as id to create map in Leaflet

javascript

angularjs

leaflet