Javascript 使用$filter服务筛选角度Google地图标记
我的目标是找出如何使用$filter服务过滤谷歌地图的角度标记 以下是背景故事： 我使用的是谷歌地图。但是，我没有使用angular的markers元素指令设置标记。我使用GoogleMapsJavaScriptAPI（传统方式）设置它们。所以我用了一种混合的方法来搜索谷歌地图。（我认为这一信息至关重要。） 我应该在main.js（controller）中使用Module.filter（）方法和$filter服务。我试过了。然而，我被卡住了。我不确定app.filter（）方法中到底是什么：我应该在每个filter函数中重新创建映射吗？此外，我不知道如何将$filter的更改连接到视图 任何帮助，即使是评论，都将不胜感激 请解释过程中涉及的步骤。如能提供尽可能多的细节，我将不胜感激 以下是my main.html（谷歌地图指令位于最底部）：Javascript 使用$filter服务筛选角度Google地图标记,javascript,angularjs,google-maps,google-maps-api-3,filter,Javascript,Angularjs,Google Maps,Google Maps Api 3,Filter,我的目标是找出如何使用$filter服务过滤谷歌地图的角度标记 以下是背景故事： 我使用的是谷歌地图。但是，我没有使用angular的markers元素指令设置标记。我使用GoogleMapsJavaScriptAPI（传统方式）设置它们。所以我用了一种混合的方法来搜索谷歌地图。（我认为这一信息至关重要。） 我应该在main.js（controller）中使用Module.filter（）方法和$filter服务。我试过了。然而，我被卡住了。我不确定app.filter（）方法中到底是什么：我应
标题
副标题
谋杀
强奸
重罪袭击
抢劫
盗窃
重大盗窃罪
严重盗窃机动车辆罪
'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
});
};
});
});
“严格使用”；
var app=角度模块（'crimespaceAngularApp'）；
app.controller（'MainCtrl'，函数（$scope，$http，$filter）{
$http.get（'/api/getCrimeData'）.success（函数（crimeData）{
$scope.crimeMarkers=crimeData；
});
//将映射对象添加到$scope：
$scope.map={
中心：{
纬度：40.7127，
经度：-74.0059
},
缩放：10，
选项：{
mapTypeId:google.maps.mapTypeId.ROADMAP，
样式：[{“元素类型”：“几何体”，“样式器”：[{“色调”：“饱和度”：-68}，{“亮度”：-4}，{“伽马”：0.72}，{“特征类型”：“道路”，“元素类型”：“标签.图标”}，{“特征类型”：“景观.人造”，“元素类型”：“几何体”，“样式器”：[{“色调”：“伽马”：3.1}，{“特征类型”：“水”，“样式器”{{“饱和度”：-33}]}，{“特征类型”：“poi.park”，“样式器”：[{“色调”：“#44ff00”}，{“饱和度”：-23}}，{“特征类型”：“水”，“元素类型”：“标签.文本.填充”，“样式器”：[{“色调”：“#007fff”}，{“伽马”：0.77}，{“饱和度”：65}，{“亮度”：99}，{“特征类型”：“水”，“元素类型”：“标签.文本.笔划”，“样式器”：“伽马”：0.77}，{，{“色调”：{“亮度”：-86}，{“特征类型”：“过渡线”，“元素类型”：“几何体”，“样式器”：{“亮度”：-48}，{“色调”：{“ff5e00”}，{“伽玛”：1.2}，{“饱和度”：-23}，{“特征类型”：“过渡”，“元素类型”：“标签.文本.笔划”，“样式器”：{“饱和度”：-64}，{“色调”：{“伽玛”：1.2}，{“饱和度”：-23}，{
}
};
$scope.mapControl={}；
//--------------------------------------------------
//将自动完成输出连接到可视地图区域：
$scope.$watch（'details'，函数（details）{
$scope.map.center={
纬度：details.geometry.location.lat（），
经度：details.geometry.location.lng（）
};
$scope.map.zoom=16；
});
//--------------------------------------------------
//自定义图标
变量圆={
路径：google.maps.SymbolPath.CIRCLE，
fillColor:'红色'，
不透明度：.9，
比例：6，
strokeColor:'黑色'，
冲程重量：1，
};
//--------------------------------------------------
var infoWindow=new google.maps.infoWindow（{}）；
//var markerCluster=新的MarkerClusterer（映射，[]{
//最大缩放：16
// });
//“$watch”注册一个侦听器回调，以便在watchExpression更改时调用：
$scope.$watch（'mapControl'，函数（mapControl）{
var map=$scope.mapControl.getGMap（）；
$http.get（'/api/getCrimeData'）.success（函数（crimeData）{
var markers=551;.map（crimeData，函数（元素）{
var myLatlng=new google.maps.LatLng（element.latitude，element.longitude）；
var marker=new google.maps.marker({
职位：myLatlng，
标题：element.type，
图标：圆圈
});
//---------------------------------------------
//信息窗口：
var infoContent=''+element.type+'
'+'月：'+element.MONTH+'
'+'年：'+element.YEAR+''；
bindInfoWindow（标记、地图、infoWindow、infoContent）；
//---------------------------------------------
返回标记；
});
//需要向以下群集构造函数添加选项：
var markerCluster=新的MarkerClusterer（地图、标记、{
最大缩放：16
});
})；//$http回调
函数bindInfoWindow（标记、地图、infoWindow、infoContent）{
google.maps.event.addListener（标记'click'，函数（）{
setContent（infoContent）；
信息窗口。打开（地图、标记）；
});
}
})；//$scope.$watch（'mapControl'，）
})；//MainCtrl的作用域结束。。。
//--------------------------------------------------
//过滤功能：
//
'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
});
};
});
});