控制器

Question

我在我的应用程序中使用了传单映射，但我需要在此映射中添加标记。我需要从json文件获取有关此标记的coördinates的信息。

所以我的计划是在我的视图中使用ng-repeat（标记中的标记），然后为每个标记调用我的控制器中的函数（createMarkers（marker.lat，markter.lng））

但我不知道这是否可行？也许有另一种方法可以做到这一点？

希望能得到一些帮助：）

控制器

lycheeControllers.controller(
  'routeCtrl',
  [
    '$scope',
    '$http',
    function ($scope, $http) {
      $http.get('json/route.json').success(
        function (data) {
          $scope.titel = "Transport route van India naar Italie"
          $scope.markers = data;

          var map = new L.Map('map');

          L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            {
              maxZoom: 18
            }
          ).addTo(map);

          map.attributionControl.setPrefix(''); // Don't show the 'Powered by Leaflet' text.

          var muzzafarpur = new L.LatLng(26.117482, 85.363364);
          map.setView(muzzafarpur, 3);

          $scope.plaatsMarkers = function(){
            alert("test");
          }

          //Extend the Default marker class
          var RedIcon = L.Icon.Default.extend(
            {
              options: {
                iconUrl: '../app/img/marker-icon.png'
              }
            }
          );

          var redIcon = new RedIcon();
        }
      );
    }
  ]
);

HTML

<section id="panel">
<section id="titel">{{titel}}</section>

<div id="map">
  <div ng-repeat="mark in markers">{{plaatsMarkers()}}</div>
</div>

JSON

[
  {
    "naam": "lychee",
    "markers": [
      {
        "mark": [
          {
            "naam": "Muzzafarpur",
            "tekst": "Lycheeplantage: de lychees worden per vrachtwagen tot de haven van Kolkata gebracht.",
            "datum": 1,
            "lng": 26.117482,
            "lat": 85.363364
          },
          {
            "naam": "Kolkata",
            "tekst": "Van hieruit vertrekt het hoofdtransport richting Gioia Tauro.",
            "datum": 2,
            "lng": 22.572765,
            "lat": 88.363975
          },
          {
            "naam": "Colombi (Sri Lanka)",
            "tekst": "Hier wordt een tussenstop gemaakt",
            "datum": 3,
            "lng": 6.947216,
            "lat": 79.844486
          },
          {
            "naam": "Golf van Aden",
            "tekst": "Risico wegens piraterij.",
            "datum": 4,
            "lng": 12.640338,
            "lat": 47.849579
          },
          {
            "naam": "Suezkanaal",
            "tekst": "Hier dient tol betaald te worden. Deze route bespaart echter wel in afstand.",
            "datum": 5,
            "lng": 30.841705,
            "lat": 32.317608
          },
          {
            "naam": "Malta",
            "tekst": "Hier wordt er overgeschakelt naar een ander schip (JRS Capella) en via de FAS Adriatic 2 Feeder Service wordt er verder koerst gezet richting Gioia Tauro.",
            "datum": 6,
            "lng": 35.902973,
            "lat": 14.523021
          },
          {
            "naam": "Gioia Tauro",
            "tekst": "Aankomst in Italie. Van hieruit worden de lychees vervoert naar de verschillende Carrefour winkels.",
            "datum": 7,
            "lng": 38.443573,
            "lat": 15.898798
          }
        ]
      }
    ]
  }
]

Answer 1

所以我的计划是在我的视图中使用ng-repeat（标记中的标记），然后为每个标记调用我的控制器中的函数（createMarkers（marker.lat，markter.lng））

我不熟悉传单，但我写的是对标记的深$watch：

JS

 $scope.$watch('list[0].markers[0].mark', function(rows) { 
    angular.forEach(rows, function(pixel){
    $scope.createMarkers(pixel);
    });        
}, true);


$scope.createMarkers = function(marker){
 console.log(marker.lat, marker.lng);
};

控制台

85.363364 26.117482
88.363975 22.572765
79.844486 6.947216
47.849579 12.640338
32.317608 30.841705
14.523021 35.902973
15.898798 38.443573

演示 Fiddle

希望它会有所帮助...

AngularJS ngRepeat函数调用

控制器

HTML

JSON

1 个答案: