使用 Angular ng-repeat 的多个传单答案

【问题标题】：Multiple Leaflet using Angular ng-repeat使用 Angular ng-repeat 的多个传单
【发布时间】：2014-08-12 12:27:52
【问题描述】：

我正在尝试制作不同用户拥有不同地图集的应用程序。为了做到这一点，我打算使用 Leaflet 和 AngularJS。计划是，使用 ng-repeat，AngularJS 将能够调用多个 Leaflet map，每个用户都不同。

这是我的 html sn-p:

<div class="row" style="text-align:center"><!-- /.row -->
    <!-- /.map-col -->
    <div class="col-lg-6 col-md-12" ng-repeat="map in maps">
        <h2>Asu</h2>
        <div id="leaflets[{{$index}}]" style="height:300px"></div>
    </div>
</div><!-- /.row -->

javascript代码：

for ( var i = 0; i < $scope.maps.length; i++ ) { 
  try{
    $scope.leaflets[i] = L.map('leaflets[' + i + ']', {
      maxZoom: 4,
      minZoom: 1,
      crs: L.CRS.Simple
    }).setView([0, 0], 1);
    // dimensions of the image
    var w = 1080,
    h = 855,
    imageUrl = $scope.maps[i].url;
    var southWest = $scope.leaflets[i].unproject([0, h], $scope.leaflets[i].getMaxZoom()-1);
    var northEast = $scope.leaflets[i].unproject([w, 0], $scope.leaflets[i].getMaxZoom()-1);
    var bounds = new L.LatLngBounds(southWest, northEast);
    L.imageOverlay(imageUrl, bounds).addTo($scope.leaflets[i]);
    // tell leaflet that the map is exactly as big as the image
    $scope.leaflets[i].setMaxBounds(bounds);
    var dataPoints = $scope.maps[i].dataPoints;
    var heat = L.heatLayer(dataPoints, {
      radius: 40, maxZoom: 4
    }).addTo($scope.leaflets[i]);
  }
  catch(err) {

  }
}

当我尝试手动编写 div id 时，例如

<div class="col-lg-6 col-md-12" ng-repeat="map in maps">
    <h2>Asu</h2>
    <div id="leaflets[0]" style="height:300px"></div>
</div>
<div class="col-lg-6 col-md-12" ng-repeat="map in maps">
    <h2>Asu</h2>
    <div id="leaflets[1]" style="height:300px"></div>
</div>

完美显示。在这两种情况下，当我尝试在 Chrome 中“检查元素”时，

附： ms javascript 使用时的错误

有人有类似的问题或有想法解决这个问题吗？谢谢！

【问题讨论】：

标签： javascript html css angularjs leaflet

【解决方案1】：

问题是因为在 HTML 仍在呈现的同时执行了 javascript。这会导致 javascript 代码找不到对应的 id。

我在 AngularJS 中使用 $timeout 服务在 HTML 完成渲染后执行 JS 代码：

HTML 还是一样的：

<div class="panel-body no-padding">
    <div class="row" style="text-align:center"><!-- /.row -->
    <!-- /.map-col -->
        <div class="col-lg-6 col-md-12" ng-repeat="map in maps">
            <h2>{{map.title}}</h2>
            <div id="leaflets[{{$index}}]" style="height:300px"></div>
        </div>
    </div><!-- /.row -->
</div><!-- /.panel-body -->

JS 现在使用超时：

.controller('EngCtrl', function ($timeout, $scope, $location, $http, $templateCache, $filter) {

...
...

var initMap = function () {
  for ( var i = 0; i < $scope.maps.length; i++ ) { 
    try{
      $scope.leaflets[i] = L.map('leaflets[' + i + ']', {
        maxZoom: 4,
        minZoom: 1,
        crs: L.CRS.Simple
      }).setView([0, 0], 1);
      // dimensions of the image
      var w = 1080,
      h = 855,
      imageUrl = $scope.maps[i].url;
      var southWest = $scope.leaflets[i].unproject([0, h], $scope.leaflets[i].getMaxZoom()-1);
      var northEast = $scope.leaflets[i].unproject([w, 0], $scope.leaflets[i].getMaxZoom()-1);
      var bounds = new L.LatLngBounds(southWest, northEast);
      L.imageOverlay(imageUrl, bounds).addTo($scope.leaflets[i]);
      // tell leaflet that the map is exactly as big as the image
      $scope.leaflets[i].setMaxBounds(bounds);
      var dataPoints = $scope.maps[i].dataPoints;
      var heat = L.heatLayer(dataPoints, {
        radius: 40, maxZoom: 4
      }).addTo($scope.leaflets[i]);
    }
    catch(err) {
    }
  }
}

$timeout(initMap, 0);

【讨论】：