如何在Google地图上使用过滤器选择标记

时间:2019-06-22 02:29:16

标签: google-maps-api-3

我正在尝试使用两个可能的值(女性和男性)过滤标记。我正在使用https://jsfiddle.net/peter/drytwvL8/处的函数,并试图创建一个下拉框。当我运行代码时,它告诉我属性的性别是未定义的。我以为我已经将性别定义为     var性别=位置。性别 当我选择一个值(例如“ Female”)时,我希望只显示包含值“ Female”的标记,而所有“ Male”点都被隐藏。

var locations = [{
lat:42.4135648,
lon:-83.1775028,
Address: 'address values',
Program_Name: 'program values', 
Service_Restriction: 'service values',
Gender: 'Female'
];
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat:42.3965006 , lng: -83.2464787}
});    
var i;          
var infowindow =  new google.maps.InfoWindow({
    content: ''
});
gmarker.push(marker);
for (i = 0; i < locations.length; i++) {        
var marker = new google.maps.Marker({
        map: map,
        title: locations[i].Program_Name,
        position: new google.maps.LatLng(locations[i].lat, 
locations[i].lon),
        gender: locations.Gender           
    });

    // place content you wound like to show in there 

bindInfoWindow(marker,map,infowindow,"<p>" +'Program: 
'+locations[i].Program_Name +"<br/>" + "Address: " 
+locations[i].Address +"<br/>"+ 'Service Restriction: ' + 
locations[i].Service_Restriction + "<br/>"  + "Gender: 
"+locations[i].Gender+ "</br>" +"</p>", locations[i].Program_Name);  
}
}
var gmarker =[];

function bindInfoWindow(marker, map, infowindow, html) { 
google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(html); 
        infowindow.open(map, marker); 
        map.panTo(this.getPosition());
});
var gender = locations.Gender

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

<select id="type" onchange="filterMarkers(this.value);">
<option value="">Please select category</option>
<option value="Male">Male</option>
<option value="Female">Female</option>

我收到的消息是     未捕获的TypeError:无法读取未定义的属性“性别”

0 个答案:

没有答案