TypeError: points.map is not a function at addressPointstoMarkers using AngularJS Leaflet Directive

TypeError: points.map is not a function at addressPointstoMarkers using AngularJS Leaflet Directive

我正在尝试使用 AngularJS leaflet 指令从 geojson 文件加载和聚类标记。但是，我收到 TypeError: points.map is not a function at addressPointstoMarkers。下面是我的代码：

  <html ng-app="myapp">
  <head>
    <meta name="viewport" content="width-device, initial-scale=1.0">
    <script src="js/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular-route.js"></script>
    <script type="text/javascript" src="js/leaflet.js"></script>
    <script type="text/javascript" src="js/angular-leaflet-directive.min.js"></script>
    <script src="js/leaflet.markercluster.js"></script>
    <link rel="stylesheet" href="css/leaflet.css" />
    <link rel="stylesheet" href="css/MarkerCluster.css" />
    <link rel="stylesheet" href="css/MarkerCluster.Default.css" />
    <script>
        var app = angular.module("myapp", ["leaflet-directive"]);
        app.controller("AlabamaController", [ "$scope", '$http', function($scope, $http) {

            var addressPointstoMarkers = function(points){
                return points.map(function(ap) {
                    return {
                        layer: 'Alabama',
                        lat: ap[0],
                        lng: ap[1]
                        };
                    });
                };

            angular.extend($scope, {
                center: {
                    lat: 30.126597156,
                    lng: -90.5958157696,
                    zoom: 5
                },
                events: {
                    map: {
                        enable: ['moveend', 'popupopen'],
                        logic: 'emit'
                        }
                },
                layers: {
                    baselayers: {
                        osm: {
                        name: 'OpenStreetMap',
                        url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                        type: 'xyz'
                        }
                    },
                    overlays:{
                        alabama: {
                            name: "Alabama",
                            type: "markercluster",
                            visible: true
                        }
                }
            }
            });

            $http.get("data/alabama.geojson").success(function(data){
                $scope.markers = addressPointstoMarkers(data);
            });
        }]);

        </script>
        <title>Alabama</title>
  </head>
  <body>
    <div ng-controller="AlabamaController">
        <leaflet lf-center="center" markers="markers" layers="layers" event-broadcast="events" width="100%" height="750px"></leaflet>    
    </div

  </body>
</html>

这是 geojson 文件中的数据片段：

[{"type":"Feature","properties":{"Name":"Drummond Co Inc","Address":"1000 Urban Center Dr Ste 300","City":"Birmingham","State":"AL","Phone":"(205) 945-6300","County":"Jefferson","Latitude":"33.48360731","Longitude":"-86.70488291","BusinessDescription":"Coal & Other Minerals & Ores - Wholesale","SIC":"5052001","SICDescription":"Coal & Other Minerals & Ores - Wholesale","NAICS":"423520","NAICSDescription":"Coal and Other Mineral and Ore Merchant Wholesalers","Website":"www.drummondco.com"},"geometry":{"type":"Point","coordinates":[-86.70488291,33.48360731]}},

您收到的错误是因为您在 points 对象上调用 map 方法，该对象不是数组。 map 方法仅适用于 Array 类型的对象。您可以通过在控制台记录 data 对象来检查这一点：console.log(data)。这样做，您会看到 data 包含 $http 方法的响应对象。您期望的 GeoJSON featurecollection 对象已分配给响应对象的 data 成员。您需要更改 $http 成功方法：

$http.get("data/alabama.geojson").success(function(response){
    $scope.markers = addressPointstoMarkers(response.data);
});

现在 data 包含实际的 GeoJSON 特征集合对象。具有所需功能的数组存储在该对象的 features 成员下，因此您需要在该对象上调用 map:

var addressPointstoMarkers = function(points){
    return points.features.map(...)
}

您在 map 方法中输入的方法也不正确。所以还是不行。它期待一个平坦的 object/array 但它获得了 GeoJSON 功能，您需要的坐标存储在 point.geometry.coordinates 下。因此，您需要相应地更改方法：

function(ap) {
    return {
        layer: 'Alabama',
        lat: ap.geometry.coordinates[1],
        lng: ap.geometry.coordinates[0]
    };
}

现在它应该可以按预期工作，但我强烈建议您不要以这种方式修复它。我怀疑您从使用普通对象数组存储坐标的示例中得到了 copy/pasted。但是您正在使用 GeoJSON featurecollection，angular leaflet 指令具有非常好的单独解决方案。只需将您的 GeoJSON 特征集合分配给 $scope:

中的成员 
$http.get("data/alabama.geojson").success(function(response){
    $scope.geojson = addressPointstoMarkers(response.data);
});

并将其直接传递给 angular 传单的 GeoJSON 指令，您就可以开始了：

<leaflet geojson="geojson" lf-center="center" markers="markers" layers="layers" event-broadcast="events" width="100%" height="750px"></leaflet>

就这么简单 :) 这是存储库中的完整示例（在基本选项卡下有更多示例）：