angularjs mit Leafletjs

Folgenden directie-code ist aus http://jsfiddle.net/M6RPn/26/
Ich möchte eine json-feed, der viele lat und lang.. bekomme ich ein json mit $resource und $http in Eckige leicht, aber Wie kann ich es füttern, um dieser Richtlinie zuordnen, was auf der Karte?

module.directive('sap', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function(scope, element, attrs) {
            var map = L.map(attrs.id, {
                center: [40, -86],
                zoom: 10
            });
            //create a CloudMade tile layer and add it to the map
            L.tileLayer('http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png', {
                maxZoom: 18
            }).addTo(map);

            //add markers dynamically
            var points = [{lat: 40, lng: -86},{lat: 40.1, lng: -86.2}];
            for (var p in points) {
                L.marker([points[p].lat, points[p].lng]).addTo(map);
            }
        }
    };
});

InformationsquelleAutor MomentH | 2012-10-19

angularjs leaflet

Ich weiß nicht viel über die Broschüre oder das, was du versuchst zu tun, aber ich würde davon ausgehen, die Sie übergeben möchten einige Koordinaten von Ihrem controller auf Ihre Richtlinie?

Gibt es tatsächlich eine Menge von Möglichkeiten, dies zu tun... der beste von denen die Nutzung von scope.

Hier ist ein Weg, um Daten von Ihrem controller auf Ihre Richtlinie:

module.directive('sap', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function(scope, element, attrs) {
            var map = L.map(attrs.id, {
                center: [40, -86],
                zoom: 10
            });
            //create a CloudMade tile layer and add it to the map
            L.tileLayer('http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png', {
                maxZoom: 18
            }).addTo(map);

            //add markers dynamically
            var points = [{lat: 40, lng: -86},{lat: 40.1, lng: -86.2}];
            updatePoints(points);

            function updatePoints(pts) {
               for (var p in pts) {
                  L.marker([pts[p].lat, pts[p].lng]).addTo(map);
               }
            }

            //add a watch on the scope to update your points.
            //whatever scope property that is passed into
            //the poinsource="" attribute will now update the points
            scope.$watch(attr.pointsource, function(value) {
               updatePoints(value);
            });
        }
    };
});

Hier ist das markup. Hier bist du hinzufügen, dass pointsource-Attribut der link-Funktion Ausschau halten, um die $Uhr.

<div ng-app="leafletMap">
    <div ng-controller="MapCtrl">
        <sap id="map" pointsource="pointsFromController"></sap>
    </div>
</div>

Dann in Ihre controller Sie haben eine Eigenschaft, Sie können nur aktualisieren.

function MapCtrl($scope, $http) {
   //here's the property you can just update.
   $scope.pointsFromController = [{lat: 40, lng: -86},{lat: 40.1, lng: -86.2}];

   //here's some contrived controller method to demo updating the property.
   $scope.getPointsFromSomewhere = function() {
     $http.get('/Get/Points/From/Somewhere').success(function(somepoints) {
         $scope.pointsFromController = somepoints;
     });
   }
}

Obige Antwort war sehr hilfreich ... Nur eine Sache, die ich versuche zu erreichen ist, löschen Sie alle Markierungen von der Funktion.. keine Ahnung?
Winkel-nicht immer auslösen, wenn Sie nur setzen Sie ein array initialisieren, wie ich bin sicher, Sie haben versucht. So kann man zuerst versuchen, dass: $scope.pointsFromController = []; die möglicherweise nicht funktionieren... wenn das nicht funktioniert, dann kann man es durch das entfernen der Elemente manuell: $scope.pointsFromController.splice(0, $scope.pointsFromController.length);

InformationsquelleAutor Ben Lesh

Ich vor kurzem gebaut ein app mit Angular JS und Merkblatt. Sehr ähnlich zu dem, was Sie beschrieben haben, einschließlich der Lage Daten aus einer JSON-Datei. Meine Lösung ist ähnlich blesh.

Hier ist der grundlegende Prozess.

Ich habe eine <map> element auf einer meiner Seiten. Dann habe ich eine Richtlinie zu ersetzen, die <map> element mit der Broschüre gekennzeichnet. Mein setup ist etwas anders, da ich das laden der JSON-Daten in eine Fabrik, aber ich habe es angepasst für Ihren Anwendungsfall (entschuldigt, wenn es Fehler). Innerhalb der Richtlinie, laden Sie Ihre JSON-Datei, dann eine Schleife durch jeden Ihrer Standorte (Sie müssen setup Ihre JSON-Datei in einem kompatiblen Weg). Zeigen Sie dann eine Markierung an jedem lat/lng.

HTML

<map id="map" style="width:100%; height:100%; position:absolute;"></map>

Richtlinie

app.directive('map', function() {
return {
    restrict: 'E',
    replace: true,
    template: '<div></div>',
    link: function(scope, element, attrs) {

        var popup = L.popup();
        var southWest = new L.LatLng(40.60092,-74.173508);
        var northEast = new L.LatLng(40.874843,-73.825035);            
        var bounds = new L.LatLngBounds(southWest, northEast);
        L.Icon.Default.imagePath = './img';

        var map = L.map('map', {
            center: new L.LatLng(40.73547,-73.987856),
            zoom: 12,
            maxBounds: bounds,
            maxZoom: 18,
            minZoom: 12
        });



        //create the tile layer with correct attribution
        var tilesURL='http://tile.stamen.com/terrain/{z}/{x}/{y}.png';
        var tilesAttrib='Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.';
        var tiles = new L.TileLayer(tilesURL, {
            attribution: tilesAttrib, 
            opacity: 0.7,
            detectRetina: true,
            unloadInvisibleTiles: true,
            updateWhenIdle: true,
            reuseTiles: true
        });
        tiles.addTo(map);

        //Read in the Location/Events file 
        $http.get('locations.json').success(function(data) {
            //Loop through the 'locations' and place markers on the map
            angular.forEach(data.locations, function(location, key){

                var marker = L.marker([location.latitude, location.longitude]).addTo(map);

            });
        });
    }
};

Beispiel-JSON-Datei

{"locations": [     
{   
    "latitude":40.740234, 
    "longitude":-73.995715
    }, 
{   
    "latitude":40.74277, 
    "longitude":-73.986654
    },
{   
    "latitude":40.724592, 
    "longitude":-73.999679
    }
]}

InformationsquelleAutor Brett DeWoody

1

Richtlinien und mvc in angularJs sind unterschiedliche Technologien. Richtlinien sind in der Regel ausgeführt, wenn die Seite geladen wird. Richtlinien sind mehr für das arbeiten auf/mit html und xml. Nachdem Sie JSON, dann Ihr bestes, um die Verwendung des mvc-framework arbeiten.

Nachdem die Seite gerendert wurde, gelten Richtlinien, die Sie oft tun müssen, um $scope.$apply() oder $kompilieren, um die änderung zu registrieren auf der Seite.

So oder so, der beste Weg, um einen service in einer Richtlinie ist die Verwendung des dependency injection-framework.

Bemerkte ich den Rahmen:true oder scope:{} fehlt in Ihrer Richtlinie. Dies hat einen großen Einfluss darauf, wie gut die Richtlinie spielt mit übergeordneten Steuerungen.
```
app.directive('mapThingy',['mapSvc',function(mapSvc){
  //directive code here.

}]);

app.service('mapSvc',['$http',function($http){
 //svc work here.
}])
```
Richtlinien angewendet werden, die durch camelCase-matching. Ich würde vermeiden Sie die Verwendung oder wegen eines Problems mit dem IE. Alternative wäre
```
<div map-thingy=""></div>
```
InformationsquelleAutor Eric Rohlfs

Unter der Annahme, dass der controller Sie haben

$scope.points = //here goes your retrieved data from json

und Ihre Richtlinie Vorlage:

<sap id="nice-map" points="points"/>

dann innerhalb Ihrer Richtlinie zu definieren, können Sie verwenden Sie die " = " - simbol, um das setup eine bidirektionale Bindung zwischen Ihrem Anwendungsbereich der Richtlinie und Ihre übergeordneten Bereich

module.directive('sap', function() {
return {
    restrict: 'E',
    replace: true,
    scope:{
      points:"=points"
    },
    link: function(scope, element, attrs) {
        var map = L.map(attrs.id, {
            center: [40, -86],
            zoom: 10
        });
        L.tileLayer('http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png', {
            maxZoom: 18
        }).addTo(map);

        for (var p in points) {
            L.marker([p.lat, p.lng]).addTo(map);
        }
    }
};
});

Auch anstelle der Zugabe der Markierungen rechts in die Karte, es ist empfehlenswert, um Ihre Marken zu einem L. featureGroup zuerst, und dann hinzufügen, dass L. featureGroup auf der Karte, da hat es eine clearLayers() metho, das sparen Sie sich einige Kopfschmerzen bei der Aktualisierung Ihres Marker.

grupo = L.featureGroup();
grupo.addTo(map);

for (var p in points) {
    L.marker([p.lat, p.lng]).addTo(grupo);
}


//remove all markers
grupo.clearLayers();

Ich hoffe das hilft, cheers,

InformationsquelleAutor Jorge Avila

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.