我的目标是弄清楚如何使用$ filter服务过滤Angular Google Maps Markers。
这是背景故事： 我使用angular-google-maps directive设置了Google地图。但是，我没有使用angular中的markers元素指令设置标记。我使用Google Maps JavaScript API（传统方式）进行设置。所以我在谷歌地图上使用了混合方法。 （我觉得这些信息至关重要。）
我应该在main.js（控制器）中使用Module.filter（）方法和$ filter服务。我试过这样做。但是，我被卡住了。我不确定app.filter（）方法内部究竟是什么：我应该在每个过滤器函数中重新创建地图吗？此外，我不知道如何将$ filter中的更改连接到视图。
任何帮助，即使是评论，也会非常感谢。
请解释该过程涉及的步骤。我会尽可能多地了解细节。
这是我的main.html（Google Maps指令位于最底层）：
<div class="row height100">
<div id="main-sidebar" class="col-md-2">
<div id="main-container">
<span id="main-header">TITLE</span>
<br>
<span id="main-subHeader">
SUBHEADER
</span>
<br><br>
<span id="main-addInput" class="height100">
<!-- The 'options' & 'details' are ngAutoComplete attributes -->
<!-- 'details="details"' is where the lat/long information comes from -->
<input type="text" value="Enter Address" ng-autocomplete ng-model="autocomplete" options="options" details="details"/>
</span>
<br><br>
</div>
<div class="navigation" id="main-navList">
<div class="dropdown">
<a target="_blank" href="#" id="dropdownMenu1" data-toggle="dropdown" ng-mouseenter="type=true" ng-mouseleave="type=false">
<span class="fa fa-tasks crime-type"></span>
</a>
</div>
</div>
<form action="#">
<input type="checkbox" id="murder-box" ng-click="checkBoxClicked(this,'MURDER')" checked/>
<label>Murder</label>
<br>
<input type="checkbox" id="rape-box" ng-click="checkBoxClicked(this,'RAPE')" checked/>
<label>Rape</label>
<br>
<input type="checkbox" id="felonyassault-box" ng-click="checkBoxClicked(this,'FELONY ASSAULT')" checked/>
<label>Felony Assault</label>
<br>
<input type="checkbox" id="robbery-box" ng-click="checkBoxClicked(this,'ROBBERY')" checked/>
<label>Robbery</label>
<br>
<input type="checkbox" id="burglary-box" ng-click="checkBoxClicked(this,'BURGLARY')" checked/>
<label>Burglary</label>
<br>
<input type="checkbox" id="grandlarceny-box" ng-click="checkBoxClicked(this,'GRAND LARCENY')" checked/>
<label>Grand Larceny</label>
<br>
<input type="checkbox" id="gla-box" ng-click="checkBoxClicked(this,'GLA')" checked/>
<label>Grand Larceny of Motor Vehicles</label>
</form>
</div>
<div class="col-md-10 height100 no-padding">
<google-map class="height100" center="map.center" zoom="map.zoom" draggable="true" options="map.options" control="mapControl">
</google-map>
</div>
</div>
这是我的main.js：
'use strict';
var app = angular.module('crimespaceAngularApp');
app.controller('MainCtrl', function ($scope, $http, $filter){
$http.get('/api/getCrimeData').success(function(crimeData){
$scope.crimeMarkers = crimeData;
});
// Add map object to the $scope:
$scope.map = {
center: {
latitude: 40.7127,
longitude: -74.0059
},
zoom: 10,
options: {
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{"elementType":"geometry","stylers":[{"hue":"#ff4400"},{"saturation":-68},{"lightness":-4},{"gamma":0.72}]},{"featureType":"road","elementType":"labels.icon"},{"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"hue":"#0077ff"},{"gamma":3.1}]},{"featureType":"water","stylers":[{"hue":"#00ccff"},{"gamma":0.44},{"saturation":-33}]},{"featureType":"poi.park","stylers":[{"hue":"#44ff00"},{"saturation":-23}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"hue":"#007fff"},{"gamma":0.77},{"saturation":65},{"lightness":99}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"gamma":0.11},{"weight":5.6},{"saturation":99},{"hue":"#0091ff"},{"lightness":-86}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"lightness":-48},{"hue":"#ff5e00"},{"gamma":1.2},{"saturation":-23}]},{"featureType":"transit","elementType":"labels.text.stroke","stylers":[{"saturation":-64},{"hue":"#ff9100"},{"lightness":16},{"gamma":0.47},{"weight":2.7}]}]
}
};
$scope.mapControl = {};
//--------------------------------------------------
// Connect ngAutoComplete output to viewable map area:
$scope.$watch('details', function(details) {
$scope.map.center = {
latitude: details.geometry.location.lat(),
longitude: details.geometry.location.lng()
};
$scope.map.zoom = 16;
});
//--------------------------------------------------
// CUSTOMIZING ICONS
var circle ={
path: google.maps.SymbolPath.CIRCLE,
fillColor: 'red',
fillOpacity: .9,
scale: 6,
strokeColor: 'black',
strokeWeight: 1,
};
//--------------------------------------------------
var infoWindow = new google.maps.InfoWindow({});
// var markerCluster = new MarkerClusterer(map, [], {
// maxZoom: 16
// });
// '$watch' registers a listener callback to be called whenever the watchExpression changes:
$scope.$watch('mapControl', function(mapControl){
var map = $scope.mapControl.getGMap();
$http.get('/api/getCrimeData').success(function(crimeData){
var markers = _.map(crimeData, function(element){
var myLatlng = new google.maps.LatLng(element.latitude, element.longitude);
var marker = new google.maps.Marker({
position: myLatlng,
title: element.type,
icon: circle
});
//---------------------------------------------
// INFO WINDOWS:
var infoContent = '<div style="width: 135px; height: 50px; font-size: 12px; font-family: Courier; color: black"><b>' + element.type + '<br>' + 'MONTH: ' + element.month + '<br>' + 'YEAR: ' + element.year +'<b></div>';
bindInfoWindow(marker, map, infoWindow, infoContent);
//---------------------------------------------
return marker;
});
// Need to add options to the following cluster constructor:
var markerCluster = new MarkerClusterer(map, markers, {
maxZoom: 16
});
}); // $http callback
function bindInfoWindow(marker, map, infoWindow, infoContent){
google.maps.event.addListener(marker, 'click', function(){
infoWindow.setContent(infoContent);
infoWindow.open(map, marker);
});
}
}); // $scope.$watch('mapControl', )
}); // End of MainCtrl's scope ...
//--------------------------------------------------
// FILTER FUNCTIONS:
// #1: Filtering for Murders:
app.filter("murderFilter", function($http){
var map = $scope.mapControl.getGMap();
$http.get('/api/getCrimeData').success(function(crimeData){
return function(){
var murderMarkers = _.map(crimeData, function(element){
if(element.type === "MURDER"){
var myLatlng = new google.maps.LatLng(element.latitude, element.longitude);
var marker = new google.maps.Marker({
position: myLatlng,
title: element.type,
icon: circle
});
//---------------------------------------------
// INFO WINDOWS:
var infoContent = '<div style="width: 135px; height: 50px; font-size: 12px; font-family: Courier; color: black"><b>' + element.type + '<br>' + 'MONTH: ' + element.month + '<br>' + 'YEAR: ' + element.year +'<b></div>';
//---------------------------------------------
return marker;
}
});
var markerCluster = new MarkerClusterer(map, murderMarkers, {
maxZoom: 16
});
};
});
});