Angular-传单指令 + JSON 标记

Question

尝试在我的应用程序中创建带有聚类标记的传单地图。用于此 Angular Leaflet Directive 插件。它适用于示例控制器和 JSON 数据，但我有其他 JSON 和其他数据格式，并且在获取纬度和经度参数以在我的地图上创建标记数组时遇到问题。

我的控制器

app.controller("BasicFirstController", [ "$scope", "$http", function($scope, $http) {

            var addressPointsToMarkers = function(points) {
              return points.map(function(ap) {
                return {
                  layer: 'realworld',
                  lat: ap[0],
                  lng: ap[1],
                 message: ap[2]                  
                };
              });
            };

            angular.extend($scope, {
                center: {
                    lat: 53.13207624721133,
                    lng: 26.01689853383789,
                    zoom: 15
                },
                events: {
                    map: {
                        enable: ['moveend', 'popupopen'],
                        logic: 'emit'
                    },
                    marker: {
                        enable: [],
                        logic: 'emit'
                    }
                },
                layers: {
                    baselayers: {
                        osm: {
                            name: 'OSM',
                            url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                            type: 'xyz'
                        },                        

                    overlays: {
                        realworld: {
                            name: "Real world data",
                            type: "markercluster",
                            visible: true
                        }
                    }
                }
            });

            $http.get("sample.json").success(function(data) {
                $scope.markers = addressPointsToMarkers(data);
            });
        }]);

使用这种 JSON 格式

[
[-37.8839, 175.3745188667, "571"],
[-37.8869090667, 175.3657417333, "486"],
[-37.8894207167, 175.4015351167, "807"],
[-37.8927369333, 175.4087452333, "899"],
[-37.90585105, 175.4453463833, "1273"]
]

需要使用这种 JSON 格式

    {
    "posts": [
        {
            "ID": "1",
            "title": "Title",
            "tag": "tag1",
            "lat": "53.11691211703813",
            "lng": "26.03631556034088",
            "thumb": "getImage-24-100x100.jpg",
            "fullimg": "getImage-24.jpg",
            "imgs": [
                {
                    "imgurl": "getImage-24-300x200.jpg"
                }
            ],
            "place": "Place",
            "type": "Photo",
            "period": "War",
            "year": "1985",
            "url": "site.com",
            "author": "author"
        },
        {
            "ID": "2",
            "title": "Title2",
            "tag": "tag2",
            "lat": "53.11691211703813",
            "lng": "26.03631556034088",
            "thumb": "getImage-24-100x100.jpg",
            "fullimg": "getImage-24.jpg",
            "imgs": [
                {
                    "imgurl": "getImage-24-300x200.jpg"
                }
            ],
            "place": "Place",
            "type": "Photo",
            "period": "War",
            "year": "1935",
            "url": "site.com",
            "author": "author"
        }
]
}

如何从 JSON 获取标记数组的经纬度数据？

Answer 1

以下是我使用从服务器发送的 JSON 文件一次发布所有标记的方法：

然后使用 $HTTP 我可以 "get" 数据，但是你必须遍历它并将详细信息推送到新的 $scope 数组：

$scope.markers = []
    $http.get('JSONfilePath').then(function (responseData) {
        for (var i = 0; i < responseData.data.length; i++){
            $scope.markers.push({
                   lat: responseData.data[i].latitude,
                   lng: responseData.data[i].longitude
            })
        }
    })

在 HTML 文件中，它非常简单：

<leaflet lf-center="center" defaults="defaults" markers="markers" width="90%" height="800px"></leaflet>

Angular-传单指令 + JSON 标记

Angular-Leaflet-Directive + JSON markers

angularjs

angularjs-ng-repeat

leaflet

angular-leaflet-directive