Question

尝试在我的应用中使用群集标记创建传单地图。用于此Angular Leaflet Directive插件。它可以使用示例控制器和JSON数据，但是我有其他JSON与其他数据格式，并且在我的地图上创建标记数组时遇到了获取lattitude和longitude参数的问题。

我的控制器

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获取带有lat和lng的数据用于markers数组？

Answer 1

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

然后使用$ HTTP，我可以“获取”数据，但是你必须遍历它并将细节推送到新的$ 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-Leaflet-Directive + JSON标记

1 个答案: