1

尝试在我的应用程序中创建带有聚类标记的传单地图。用于这个 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 中获取带有 lat 和 lng 的数据作为标记数组？

4

1 回答 1

0

这是对我有用的从服务器发送的 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>
于 2016-03-23T04:28:25.343 回答