TypeError：points.map在使用AngularJS Leaflet Directive的addressPointstoMarkers處不是函數

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文件中的數據片段：

[{“類型”：“功能”，“屬性”：{“名稱”：“ Drummond Co Inc”，“地址”：“ 1000 Urban Center Dr Ste 300”，“城市”：“伯明翰”，“州”： “ AL”，“電話”：“（205）945-6300”，“縣”：“傑斐遜”，“緯度”：“ 33.48360731”，“經度”：“-86.70488291”，“業務描述”：“煤炭及其他礦物和礦石-批發”，“ SIC”：“ 5052001”，“ SIC描述”：“煤炭和其他礦物和礦石-批發”，“ NAICS”：“ 423520”，“ NAICSDescription”：“煤炭和其他礦物和礦石商人”批發商”， “網站”： “www.drummondco.com”}， “幾何”：{ “類型”： “點”， “坐標”： - 86.70488291,33.48360731]}}，

Answer 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 Featurecollection對象。 具有所需功能的數組存儲在該對象的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功能集合，該功能集合的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 個解決方案

解決方案1
4 已采納 2016-01-14 10:33:55

TypeError：points.map在使用AngularJS Leaflet Directive的addressPointstoMarkers處不是函數

問題描述

1 個解決方案

解決方案1 4 已采納 2016-01-14 10:33:55

解決方案1
4 已采納 2016-01-14 10:33:55