4

Angular-Leaflet-Directive と $resource を使用して Web サービスを呼び出す 2 つの異なる Angular サービスからのデータを使用してマップを生成しようとしています。これらのサービスは、緯度/経度の値を含む JSON メッセージを返し、地図上にマーカーを設定します。

ただし、サービスからデータを使用するためのディレクティブを取得できません。

サービスがスコープを更新しているため、正常に動作していることがわかります。コントローラーに値をハードコードすると、マップ マーカーが正しくレンダリングされます (たとえば、以下の「中心」を参照)。私がやりたいことは、この例に非常に似ています

これが私のコードです：

コントローラ：

angular.module('myDetails', ['leaflet-directive', 'shop', 'home'])
.controller('MyDetailsCtrl', ['$scope', '$routeParams', '$http', '$q', '$rootScope', 'shopService', 'homeService', function ($scope, $routeParams, $http, $q, $rootScope, shopService, homeService) {

        function getShop() {
        var d = $q.defer();
        var shop = shopService.get({shopId: $routeParams.shopId}, function (shop) {
            d.resolve(shop);
        });
        return d.promise;
    }

        function getHome() {
        var d = $q.defer();
        var home = homeService.get({homeId: $routeParams.homeId}, function (home) {
            d.resolve(home);
        });
        return d.promise;
    } 

$q.all([
            getShop(),
            getHome()
        ]).then(function (data) {
            var shop = $scope.shop = data[0];
            var home = $scope.home = data[1];

            var markers = {
                shop: {
                    lat: $scope.shop.loc.coordinates[0],
                    lng: $scope.shop.loc.coordinates[1],
                    draggable: false,
                    message: $scope.shop.name,
                    focus: true
                },
                home: {
                    lat: $scope.home.loc.coordinates[0],
                    lng: $scope.home.loc.coordinates[1],
                    draggable: false,
                    message: $scope.home.name,
                    focus: true
                }
            };
            console.log("Markers are " + angular.toJson(markers));
            $scope.markers = markers;
        });

    $scope.center = {
                lat: 53.26,
                lng: -2.45,
                zoom: 6
            };

}]);

私が見つけたのは、私の2つのサービスが返され、スコープが値で更新されますが、これはangular-leaflet-directiveに渡されないということです.

ディレクティブに関するAngularのドキュメントは、ディレクティブの次のコードが子スコープを親スコープにリンクして、両方が更新されることを示唆しています。

    scope: {
        center: '=center',
        maxBounds: '=maxbounds',
        bounds: '=bounds',
        marker: '=marker',
        markers: '=markers',
        defaults: '=defaults',
        paths: '=paths',
        tiles: '=tiles',
        events: '=events'
    }

しかし、それは私にはうまくいかないようです。ただし、angular-leaflet-directive パスの例では、これが許可されているように見え (マーカーの追加、マーカーの変更などを行うことができます)、マップはリアルタイムで更新されます。

サービスが再開されたら、マップにマーカーを表示するにはどうすればよいですか?

これについて Stackoverflow にも同様の質問がありますが、これらの質問に対する答えは、ディレクティブ内にサービス呼び出しを含めることです。コントローラーは、フォーム送信の処理など、単なるサービス呼び出しよりも多くの機能を提供しており、同じデータへのアクセスを必要とするため、これを行いたくありません。

4

2 に答える 2

1

これを修正する最も簡単な方法は、コントローラーに次の行を追加することです...

angular.extend($scope, {
    markers : {}
}

これにより、スコープの継承が設定されます。以前はこれを行っていなかったので、leaflet ディレクティブのスコープは $scope.markers が存在しなかったため認識していませんでした。

于 2013-07-29T15:18:45.237 に答える
1

同様の問題がありました。私の場合、リーフレット タグ要素をラップするコントローラーに関連付けられた div があります。

<div ng-controller="MapCtrl">
    <leaflet id="map" class="map" maxBounds="maxBounds" defaults="defaults" center="center"></leaflet>
</div>

ご想像のとおり、「maxBounds」、「defaults」、および「center」の値は、ディレクティブの $scope ではなく、親の $scope にありました。これを軽減するために、angular-leaflet-directive コードを変更して、これらの変数のスコープ スタックを検索する必要がありました。

var mapScope = $scope;
if (mapScope.defaults === null || typeof mapScope.defaults === "undefined") {
    mapScope = mapScope.$parent;
}
if (mapScope.defaults === null || typeof mapScope.defaults === "undefined") {
    throw new Error("Cannot find map defaults - have they been initialized?");
}

私はAngularを初めて使用することを認めているので、これを達成するためのより良い方法があるかもしれませんが、それは私にとってはうまくいきました.

于 2013-07-26T04:09:23.397 に答える