如何使用select标记过滤ui-gmap-markers

时间：2016-07-24 18:46:49

标签： javascript angularjs google-maps google-maps-markers angular-google-maps

到目前为止，我必须在我的网站上显示一个带有标记的地图，这取决于JSON文件中指定的不同对象的纬度和经度。这些标记可以通过select标记进行过滤，该标记显示在这些JSON对象中找到的不同类别。

我一直在使用ui-gmap-marker（ng-repeat），但在这里我发现我最好使用 ui-gmap-markers 。事情是我一直试图实现它，但我不可能应用我在select标签中得到的过滤器（在模型中过滤=＆＃34;＆＃34;给出很多错误！）此外，infoWindows不会显示我在JSON文件中获得的信息（我之前通过ng-repeat获得的信息）。

我一直在尝试从这里工作：http://embed.plnkr.co/f2gxG7DM1U8IlOXfRiuT/

ui-gmap-markers implemented 

<div ng-controller="loadMapController">
    <select id="dropdown" ng-model="categoryOrder">
        <option value="0">All</option>
        <option ng-repeat="category in categories" value="{{category}}">{{category}}</option>
    </select>

    <ui-gmap-google-map center='map.center' zoom='map.zoom' aria-label="Google map" pan="true">

        <ui-gmap-markers models="map.markers" idKey="'id'" coords="'self'" events="map.markersEvents">
            <ui-gmap-window show="map.window.show" coords="map.window.model" ng-cloak>
                <div>
                    <p><img ng-src="{{image}}" alt="{{name}}" style="width: 200px; height: 150px; border-radius: 5px;"></p>
                    <p><strong>{{name}}</strong></p>
                    <p>{{address}}</p>
                    <p><a ng-href="{{website}}">Website</a></p>
                    <p><span class="glyphicon glyphicon-plus"> </span><a href="#/"> Profile</a></p>
                </div>
            </ui-gmap-window>
        </ui-gmap-markers>

    </ui-gmap-google-map>

    <ul>
        <li ng-repeat="location in locations | filter:categoryOrder" ng-class="{selected: location == map.window.model}" ng-click="map.window.model = location">
            <p>{{location.name}}</p>
        </li>
    </ul>   
</div>




.controller('loadMapController', ['$scope', '$http', function($scope, $http){

    $http.get ("json/map_data.json").success(function(data) {
        $scope.locations = data;

        var category = [];

        for (var i = 0; i < data.length; i++){
            category[i] = data[i].category;
        };

        var sorted_categories = category.sort();

        $scope.categories = [];

        for (var i = 0; i < category.length; i++){
            if (sorted_categories[i+1] != sorted_categories[i]){
                $scope.categories.push(sorted_categories[i]);
            }
        };

        $scope.map.markers = data;

        console.log($scope.map.markers);

    })

    $scope.map = { 
        center: { 
            latitude: 37.395400, 
            longitude: -5.984930 
        }, 
        zoom: 12, 
        window: {
            model: {},
            show: false,
            options:{
                pixelOffset: {width:-1,height:-20}
            }
        }, 
        markers: [],
        markersEvents: {
            click: function(marker, eventName, model, args) {
                $scope.map.window.model = model;
                $scope.map.window.show = true;      
            }
        }
    };
}]);

1 个答案:

答案 0 :(得分：0)

关于过滤标记，您可以考虑以下解决方案。

在类别通过ngChange更改后，引入事件以根据所选类别过滤标记：

<select id="dropdown" ng-model="categoryOrder" ng-change="changeCategory(categoryOrder)">
    <option value="All">All</option>
    <option ng-repeat="category in categories" value="{{category}}">{{category}}</option>
</select>


$scope.changeCategory = function (selectedCat) {
        if (selectedCat == "All")
            $scope.map.markers = $scope.map.allMarkers;
        else
            $scope.map.markers = $scope.map.allMarkers.filter(function (item) {
                return item.category == selectedCat;
            });
    }

其中allMarkers包含所有可用的标记

$scope.map.allMarkers = data;

示例

＆＃13;
＆＃13; 
angular.module('app', ['uiGmapgoogle-maps'])
    .controller('loadMapController', ['$scope', '$http', function ($scope, $http, uiGmapGoogleMapApi) {

        $scope.changeCategory = function (selectedCat) {
            if (selectedCat == "All")
                $scope.map.markers = $scope.map.allMarkers;
            else
                $scope.map.markers = $scope.map.allMarkers.filter(function (item) {
                    return item.category == selectedCat;
                });
        }

        $http.get("https://rawgit.com/vgrem/b3a820dcdf3c7b14fba6e53614a951b4/raw/map_data.json").success(function (data) {
            $scope.locations = data;

            var category = [];

            for (var i = 0; i < data.length; i++) {
                category[i] = data[i].category;
            };

            var sorted_categories = category.sort();

            $scope.categories = [];

            for (var i = 0; i < category.length; i++) {
                if (sorted_categories[i + 1] != sorted_categories[i]) {
                    $scope.categories.push(sorted_categories[i]);
                }
            };

            $scope.map.markers = data;
            $scope.map.allMarkers = data;
        });

        $scope.map = {
            center: {
                latitude: 36.2509994,
                longitude: -113.6920185
            },
            zoom: 3,
            window: {
                model: {},
                show: false,
                options: {
                    pixelOffset: { width: -1, height: -20 }
                }
            },
            markers: [],
            markersEvents: {
                click: function (marker, eventName, model, args) {
                    $scope.map.window.model = model;
                    $scope.map.window.show = true;
                }
            }
        };
    }]);
＆＃13; 
.angular-google-map-container {
	height: 30em;
}
＆＃13; 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js" charset="utf-8"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.js" charset="utf-8"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.1.0-X.5/angular-google-maps.js" charset="utf-8"></script>
  


  <div ng-app="app" ng-controller="loadMapController">
    <select id="dropdown" ng-model="categoryOrder" ng-change="changeCategory(categoryOrder)">
        <option value="All">All</option>
        <option ng-repeat="category in categories" value="{{category}}">{{category}}</option>
    </select>

    <ui-gmap-google-map center='map.center' zoom='map.zoom' aria-label="Google map" pan="true">

        <ui-gmap-markers models="map.markers" idKey="'id'" coords="'self'" events="map.markersEvents">
        </ui-gmap-markers>

        <ui-gmap-window show="map.window.show" coords="map.window.model" ng-cloak>
                <div>
                    <p><img ng-src="{{map.window.model.image}}" alt="{{map.window.model.name}}" style="width: 200px; height: 150px; border-radius: 5px;"></p>
                    <p><strong>{{map.window.model.name}}</strong></p>
                    <p>{{map.window.model.address}}</p>
                    <p><a ng-href="{{map.window.model.website}}">Website</a></p>
                    <p><span class="glyphicon glyphicon-plus"> </span><a href="#/"> Profile</a></p>
                </div>
        </ui-gmap-window>

    </ui-gmap-google-map>

    <ul>
        <li ng-repeat="location in locations | filter:categoryOrder" ng-class="{selected: location == map.window.model}" ng-click="map.window.model = location">
            <p>{{location.name}}</p>
        </li>
    </ul>   

   
</div>
＆＃13;
＆＃13;
＆＃13;

Plunker

相关问题
最新问题