Question

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

这是我的html代码段：

<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中“检查元素”时，

P.S。使用时的ms javascript错误

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

Answer 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);

使用Angular ng-repeat的多个Leaflet

1 个答案: