4

我正在尝试使用Angular-Leaflet-Directive 和来自 2 个使用 $resource 调用 Web 服务的不同 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 : {}
}

这设置了范围继承。我以前没有这样做，所以传单指令中的范围不知道 $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 回答