我正在尝试将“按犯罪类型显示”功能添加到我的犯罪地图中。我有7种不同的犯罪类型，并使用Google Maps JavaScript API在地图上显示它们。
我已在前端设置了犯罪类型的图标和下拉选项。我的下一步是使用Angular.js仅显示所选择的犯罪类型。
怎么可能这样做呢？这是我的main.html和main.js（控制器）文件：
main.html中
<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">
Subtitle
</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 href="#" class="fa fa-tasks crime-type" id="dropdownMenu1" data-toggle="dropdown"></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">All</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Rape</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Murder</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Felony Assault</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Grand Larceny</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Robbery</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Burglary</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Grand Larceny of Motor Vehicle</a></li>
</ul>
</div>
<br>
<a href="/about">ABOUT</a>
<br>
<a href="/crime">CRIME STATISTICS</a>
</div>
<br>
<br>
<br>
<ul class="about-icons">
<li class="twitter">
<a href="https://twitter.com/hacker_adi">
<span class="fa fa-twitter fa-2x" style="color: #CCC"></span>
</a>
</li>
<li class="github">
<a href="https://github.com/AdiedX">
<span class="fa fa-github fa-2x" style="color: #CCC"></span>
</a>
</li>
</ul>
</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){
$http.get('/api/getCrimeData').success(function(crimeData){
console.log(crimeData.length);
$scope.crimeMarkers = crimeData;
// $scope.$apply();
});
// 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}]}]
}
};
// SETTING UP MARKERS THE OLD SCHOOL WAY:
// This empty object is for the "control" attribute of the google-maps angular directive which will allow us to obtain the direct reference to the google map instance being used by the directive:
$scope.mapControl = {};
// var str_title = element.type + ' ' + element.month + ', ' + element.year;
//--------------------------------------------------
// Connect ng-autoComplete output to viewable map area:
$scope.$watch('details', function(details) {
// console.log(details);
// debugger;
$scope.map.center = {
latitude: details.geometry.location.lat(),
longitude: details.geometry.location.lng()
};
$scope.map.zoom = 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
});
//---------------------------------------------
// INFO WINDOWS:
var infowindow = new google.maps.InfoWindow({
content: '<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>'
});
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map, marker);
});
//---------------------------------------------
return marker;
});
// Need to add options to the following cluster constructor:
var mc = new MarkerClusterer(map, markers, {
maxZoom: 16
});
});
});
});
我应该使用指令吗？如何访问指令中所有犯罪数据的crimeData数组？