Question

我正在创建一个角度/节点/快递应用。一个页面必须显示位置列表（来自JSON文件），并在谷歌地图上绘制每个位置。当用户单击调用getLocations（）的按钮时，将填充此位置列表。问题是，我的位置列表使用分页，一次最多只显示5个结果。我需要我的地图一次只显示这5个相同的位置，并在页面更改时更改。

我对角度较新，并且无法使用ui-gmap-markers指令动态地将位置加载到地图上。我现在只有使用分页的位置列表。有关如何使地图标记起作用的任何想法？

JSON代码段：

[{"LOC_ID":"0001","LONGITUDE":-115.175777,"LATITUDE":36.098731,"LOC_NAME":"ABC","ADDRESS":"3850 S LAS VEGAS BLVD","CITY":"LAS VEGAS","STATE":"NV","ZIP":"89109"},{"LOC_ID":"0002","LONGITUDE":-115.170801,"LATITUDE":36.099031,"LOC_NAME":"DEF","ADDRESS":"3801 S LAS VEGAS BLVD","CITY":"LAS VEGAS","STATE":"NV","ZIP":"89109"},{"LOC_ID":"0003","LONGITUDE":-115.176116,"LATITUDE":36.095784,"LOC_NAME":"GHI","ADDRESS":"3900 S LAS VEGAS BLVD","CITY":"LAS VEGAS","STATE":"NV","ZIP":"89109"},{"LOC_ID":"0004","LONGITUDE":-115.428098,"LATITUDE":36.135511,"LOC_NAME":"JKL","ADDRESS":"3205 NEVADA 159","CITY":"LAS VEGAS","STATE":"NV","ZIP":"89161"},{"LOC_ID":"0005","LONGITUDE":-115.170221,"LATITUDE":36.112358,"LOC_NAME":"MNO","ADDRESS":"3655 S LAS VEGAS BLVD","CITY":"LAS VEGAS","STATE":"NV","ZIP":"89109"},{"LOC_ID":"0006","LONGITUDE":-115.168525,"LATITUDE":36.122917,"LOC_NAME":"PQR","ADDRESS":"3355 S LAS VEGAS BLVD","CITY":"LAS VEGAS","STATE":"NV","ZIP":"89109"},{"LOC_ID":"0007","LONGITUDE":-115.156306,"LATITUDE":36.147695,"LOC_NAME":"STU","ADDRESS":"2000 S LAS VEGAS BLVD","CITY":"LAS VEGAS","STATE":"NV","ZIP":"89104"}]

Jade Snippet：

.button(ng-click="getLocations()")
.location-details
  ul
    li(ng-repeat"location in locations | startFrom:currentPage*pageSize | limitTo:pageSize")
      h3 {{location.name}}
      span {{location.address}}
      span {{location.city}}
      span {{location.state}}
      span {{location.zip}}
.map
  .angular-google-map-container
    ui-gmap-google-map(center='map.center' zoom='map.zoom')
      ui-gmap-markers

Controller Snippet：

$scope.getLocations = function(){
    $scope.jsonUrl = 'https://mytestsite.com/locations.json';
    $http.get($scope.jsonUrl)
    .then(function (response) {
        $scope.locations = response.data
        $scope.jsonLength = $scope.locations.length;
        for (var i = 0; i<=$scope.jsonLength - 1; i++) {
            //doing custom stuff here
        }
        $scope.pagingResults();
    }
};
$scope.map = {
    center: {
        latitude: 39.7701769,
        longitude: -98.5815046,
    },
    zoom: 8
};

动态添加多个标记到Angular Google Map +分页

0 个答案: