Javascript 如何使用select标记筛选ui gmap标记

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

我一直在使用ui-gmap标记（ng-repeat），但在这里我发现我最好使用ui-gmap标记。问题是我一直在尝试实现它，但是我不可能应用我在select标记中得到的过滤器（filter in models=“”给出很多错误！），而且，infoWindows没有显示我在JSON文件中得到的信息（我以前通过ng repeat得到的）

我一直在尝试从这里开始工作：

全部的
{{category}}

{{name}}

{{地址}





{{location.name}



.controller（'loadMapController'，['$scope'，'$http'，函数（$scope，$http）{
$http.get（“json/map_data.json”）.success（函数（数据）{
$scope.locations=数据；
var类别=[]；
对于（变量i=0；i关于过滤标记，您可以考虑以下解决方案。

在类别更改后，通过以下方式引入事件以基于选定类别筛选标记：

示例


angular.module（'app'，['uiGmapgoogle-maps']））
.controller（'loadMapController'，['$scope'，'$http'，函数（$scope，$http，uiGmapGoogleMapApi）{
$scope.changeCategory=功能（selectedCat）{
如果（selectedCat==“全部”）
$scope.map.markers=$scope.map.allMarkers；
其他的
$scope.map.markers=$scope.map.allMarkers.filter（函数（项）{
return item.category==selectedCat；
});
}
$http.get（“https://rawgit.com/vgrem/b3a820dcdf3c7b14fba6e53614a951b4/raw/map_data.json）。成功（功能（数据）{
$scope.locations=数据；
var类别=[]；
对于（变量i=0；i
.angular谷歌地图容器{
高度：30公分；
}

全部的
{{category}}

{{map.window.model.name}

{{map.window.model.address}





{{location.name}



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

在类别更改后，通过以下方式引入事件以基于选定类别筛选标记：

示例


angular.module（'app'，['uiGmapgoogle-maps']））
.controller（'loadMapController'，['$scope'，'$http'，函数（$scope，$http，uiGmapGoogleMapApi）{
$scope.changeCategory=功能（selectedCat）{
如果（selectedCat==“全部”）
$scope.map.markers=$scope.map.allMarkers；
其他的
$scope.map.markers=$scope.map.allMarkers.filter（函数（项）{
return item.category==selectedCat；
});
<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;      
            }
        }
    };
}]);

<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;
            });
    }

$scope.map.allMarkers = data;