javascript - 谷歌地图标记类别过滤不起作用？

Question

Angularjs 谷歌地图类别过滤不起作用。我已附上我的代码。这里我使用类别过滤谷歌地图标记。当我从下拉列表过滤中选择类别时，我在下拉列表中给出了类别，该类别不起作用。我已附上我的 fiddle ，有人可以帮助我继续前进https://jsfiddle.net/h9seLt22/2/

angular.module('myApp', [])
.controller('MapCtrl', [
 '$scope', '$http', '$compile',
 function($scope, $http, $compile) {
//-------------------------------------------------------------------------------------------------------------------------------------------------
$scope.find = function(){

var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
    content: ''
});

// Our markers
markers1 = [
    ['0', 'Madivala', 12.914494, 77.560381, 'computer science,electronic system,communication thoery,english','as12','Abi Tech ACC'],
    ['1', 'Majestic', 12.961229, 77.559281, 'electronic system,Telecommunication,optical&fiber optics','as13','Vell Infotech'],
    ['2', 'Ecity', 12.92489905, 77.56070772, 'communication thoery,english,Digital Electronics,signal&systems','as14','vinoth coching center'],
    ['3', 'Jp nagar', 12.91660662, 77.52047465, 'Digital Electronics,signal&systems','as15','Gpy tech archi']
];

/**
 * Function to init map
 */

function initialize() {
    var center = new google.maps.LatLng(12.9667,77.5667);
    var mapOptions = {
        zoom: 12,
        center: center,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    for (i = 0; i < markers1.length; i++) {
        addMarker(markers1[i]);
    }
}

/**
 * Function to add marker to map
 */

function addMarker(marker) {
    var category = marker[4];
    var title = marker[1];
    var pos = new google.maps.LatLng(marker[2], marker[3]);
    var content = marker[1];
    var fullContent = marker.slice(1,6).join();

    var marker1 = new google.maps.Marker({
        title: title,
        position: pos,
        category: category,
        map: map
    });

    gmarkers1.push(marker1);

    // Marker click listener
    google.maps.event.addListener(marker1, 'click', (function (marker1, idx, markers1) {
  return function () {
            console.log('Gmarker 1 gets pushed');
			var compiled = '<div><div>' +markers1[idx][0] + ' </div><div>' + markers1[idx][1] + ' </div><div>' +markers1[idx][2] + ' </div><div><button id="' +  markers1[idx][5] + '">Get</button></div></div>';
            var infowindow = new google.maps.InfoWindow({
            content: compiled
            });
            infowindow.open(map, marker1);
            map.panTo(this.getPosition());
            map.setZoom(15);
        }
    })(marker1,i, markers1));
}
$(document.body).on('click', 'button', function() {
	console.log(this.id);
});
/**
 * Function to filter markers by category
 */

filterMarkers = function (category) {
console.log(category);
    for (i = 0; i < markers1.length; i++) {
        marker = gmarkers1[i];
        // If is same category or category not picked
        if (marker.category.split(',') == category || category.length === 0) {
            marker.setVisible(true);
        }
        // Categories don't match 
        else {
            marker.setVisible(false);
        }
    }
}

// Init map
initialize();

}
}]);

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<style type='text/css'>
        #map-canvas {
    width: 500px;
    height: 500px;
}
  </style>
<div ng-app="myApp">
<div ng-controller="MapCtrl" ng-init="find()">
<div id="map-canvas"></div>
<select id="type" onchange="filterMarkers(this.value);">
    <option value="">Please select category</option>
    <option value="computer science">computer science</option>
    <option value="electronic system">electronic system</option>
    <option value="communication thoery">communication thoery</option>
	<option value="english">english</option>
    <option value="optical&fiber optics">optical&fiber optics</option>
    <option value="Digital Electronics">Digital Electronics</option>
	<option value="signal&systems">signal&systems</option>
    
</select>
 </div>
 </div>

Answer 1

试试这个:- https://jsfiddle.net/h9seLt22/6/

JS:-

 filterMarkers = function (category) {
            for (i = 0; i < markers1.length; i++) {
                marker = gmarkers1[i];
                // If is same category or category not picked
                if (marker.category.toLowerCase().indexOf(category.toLowerCase()) > -1 || category.length === 0) {
                    marker.setVisible(true);
                }
                // Categories don't match 
                else {
                    marker.setVisible(false);
                }
            }
        }