Question

我正在尝试使用AngularJS leaflet指令从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文件中的数据片段：

[{ “类型”： “功能”， “属性”：{ “名称”：“德拉蒙德 Co Inc“，”地址“：”1000 Urban Center Ste 300" ， “城市”： “伯明翰”， “国家”： “AL”， “电话”：“（205） 945-6300" ， “县志”： “杰斐逊”， “纵横”： “33.48360731”， “经度”： “ - 86.70488291”， “BusinessDescription”：“煤炭＆安培;其他矿物质和矿石 - 批发“，”SIC“：”5052001“，”SICDescription“：”煤炭＆amp;其他矿物质和矿石 - 批发“，”NAICS“：”423520“，”NAICSDescription“：”煤和其他矿产和矿石商人批发商”， “网站”： “www.drummondco.com”}， “几何”：{ “类型”： “点”， “坐标”：[ - 86.70488291,33.48360731]}}，

Answer 1

您获得的错误是因为您在map对象上调用了不是数组的points方法。 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 featurecollection对象。具有您需要的功能的数组存储在该对象的features成员下，因此您需要在其上调用地图：

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 featurecollection，其中angular leaflet指令具有完美的独立解决方案。只需将您的GeoJSON featurecollection指定给$scope中的成员：

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

直接传递给角度传单的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

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

1 个答案: