未知提供商使用 LeafletView 在 Angular Leaflet Directive 中显示弹出窗口答案

【问题标题】：Unknown provider using leafletView to display popup in Angular Leaflet Directive未知提供商使用 LeafletView 在 Angular Leaflet Directive 中显示弹出窗口
【发布时间】：2016-01-26 20:58:15
【问题描述】：

我正在尝试使用 prune cluster 在角度传单地图中显示弹出窗口。但是，我收到一个错误，即leafletView 是一个未知的提供者。我已按照此页面上的示例进行操作，但没有成功 - https://github.com/SINTEF-9012/PruneCluster。这是我的代码：

angular.module('bizvizmap').controller('controller', [
    '$scope', '$http', '$filter', 'leafletData', 'leafletView',
    function ($scope, $http, $filter, leafletData, leafletView){
    $scope.center = {
        lat: 39.5500507,
        lng: -105.7820674,
        zoom: 4
            },
    $scope.defaults = {
        scrollWheelZoom: true
            },
    $scope.events = {
            map: {
            enable: ['zoomstart', 'drag', 'click', 'mousemove'],
            logic: 'emit'
            }
            },
    $scope.layers = {
            baselayers: {
            osm: {
            name: 'OpenStreetMap',
            url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            type: 'xyz'
                    }
                },
            markers:{}
    },
    $scope.map = null;
    leafletData.getMap("bizvizmap").then(function(map){
        $scope.map = map;
    });
    function renderMarkers(data, map){
        var markerLayer = new PruneClusterForLeaflet();
        for (var i=0; i < data.length; i++){
            var marker = new PruneCluster.Marker(data[i].geometry.coordinates[1], data[i].geometry.coordinates[0]);
            popup: "Marker";
            markerLayer.RegisterMarker(marker);
        }
        map.addLayer(markerLayer);
        markerLayer.ProcessView();
    }
//Display PopUp
    leafletView.PrepareLeafletMarker = function (marker, data) {
        if (marker.getPopup()) {
            marker.setPopupContent(data.company);
        } else {
            marker.bindPopup(data.company);
        }
    };
    $scope.geojson = {};
    $http.get('data/bizvizmap.geojson').success(function (data){
            $scope.data = data;
            // Render clustered markers
            renderMarkers(data.features, $scope.map);
        });
    // Filtering markers
    $scope.search = {
        'NAICS':'',
        'SIC':''
    };
        $scope.$watch('search', function(newVal, oldVal){
            if(!angular.equals(newVal, oldVal)) {
                var geojson = angular.copy($scope.data);
                angular.forEach(newVal, function(value, property){
                    console.log(property + ':' + value);
                    if (value !== ''){
                        geojson = $filter('filter')(geojson, property, value);
                    }
                });
        function removeMarkers(data, map){
        map.removeLayer(markerLayer);
        markerLayer.ProcessView();
    }
                //map.removeLayer(markerLayer);
                // Remove all the markers
               $scope.geojson.data = geojson;
               //renderMarkers(data.features, $scope.map);
            } else {
                $scope.geojson.data = $scope.data;
            }
        }, true);
    }
]);

【问题讨论】：

标签： javascript angularjs leaflet angular-leaflet-directive

【解决方案1】：

我认为必须修改才能添加弹出窗口的对象是实际的 prunecluster（如果您正在注册标记）。

var markerLayer = new PruneClusterForLeaflet();

markerLayer.PrepareLeafletMarker = function (marker, data) {
    if (marker.getPopup()) {
        marker.setPopupContent(data.company);
    } else {
        marker.bindPopup(data.company);
    }
};

【讨论】：