TypeError：points.map 不是使用 AngularJS Leaflet Directive 的 addressPointstoMarkers 的函数答案

【问题标题】：TypeError: points.map is not a function at addressPointstoMarkers using AngularJS Leaflet DirectiveTypeError：points.map 不是使用 AngularJS Leaflet Directive 的 addressPointstoMarkers 的函数
【发布时间】：2016-04-19 12:08:19
【问题描述】：

我正在尝试使用 AngularJS 传单指令从 geojson 文件加载和聚类标记。但是，我收到 TypeError：points.map 不是 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文件中数据的sn-p：

[{"type":"Feature","properties":{"Name":"Drummond Co Inc","Address":"1000 Urban Centre Dr Ste 300","城市":"伯明翰","州":"AL","电话":"(205) 945-6300","县":"杰斐逊","纬度":"33.48360731","经度":"-86.70488291","业务描述":"煤炭 & 其他矿物 & 矿石 - Wholesale","SIC":"5052001","SICDescription":"Coal & Other Minerals & 矿石 - 批发","NAICS":"423520","NAICSDescription":"煤炭和其他矿物和矿石商人 Wholesalers","Website":"www.drummondco.com"},"geometry":{"type":"Point","coordinates":[-86.70488291,33.48360731]}},

【问题讨论】：

请包含您从data/alabama.geojson URL 获取的数据。
@SinaGh 我在geojson文件中添加了数据的sn-p，因为文件很大。

标签： javascript angularjs leaflet angular-leaflet-directive

【解决方案1】：

您遇到的错误是因为您在不是数组的points 对象上调用map 方法。 map 方法仅适用于 Array 类型的对象。您可以通过在控制台中记录data 对象来检查这一点：console.log(data)。这样做，您将看到 data 保存您的 $http 方法的响应对象。您期望的 GeoJSON 特征集合对象被分配给响应对象的 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 方法中输入的方法也不正确。所以还是不行。它需要一个平面对象/数组，但它获得了 GeoJSON 功能，您需要的坐标存储在point.geometry.coordinates 下。所以你需要相应地改变方法：

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

现在它应该可以按预期工作，但我强烈建议您不要以这种方式修复它。我怀疑你已经从一个使用普通对象数组来存储坐标的示例中复制/粘贴了这个。但是您正在使用一个 GeoJSON 特征集合，其中角度传单指令具有非常好的单独解决方案。只需将您的 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>

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

http://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/basic/geojson-simple-example

【讨论】：