使用复选框过滤谷歌地图标记

我试图根据这个V3示例从复选框中过滤我的谷歌地图标记。 我的复选框html是：

 Attractions:     Food and Drink:     Hotels:     Towns/Cities: 
  

我的javascript在下面。 我似乎无法让filter工作 – 目前所有标记都出现在地图上，无论复选框的状态如何。 我猜我在错误的地方得到了一些变量，但到目前为止我还没能解决问题！ 任何帮助将非常感激。

 var map; var infowindow; var image = []; var gmarkers = []; image['attraction'] = 'http://google-maps-icons.googlecode.com/files/beach.png'; image['food'] = 'http://google-maps-icons.googlecode.com/files/restaurant.png'; image['hotel'] = 'http://google-maps-icons.googlecode.com/files/hotel.png'; image['city'] = 'http://google-maps-icons.googlecode.com/files/smallcity.png'; function mapInit(){ var centerCoord = new google.maps.LatLng(18.23, -66.39); var mapOptions = { zoom: 1, center: centerCoord, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map"), mapOptions); google.maps.event.addListener(map, 'click', function() { infowindow.close(); }); jQuery.getJSON("/places", function(json) { if (json.length > 0) { for (i=0; i<json.length; i++) { var place = json[i]; var category = json[i].tag; addLocation(place,category); } } }); function addLocation(place,category) { var marker = new google.maps.Marker({ position: new google.maps.LatLng(place.lat, place.lng), map: map, title: place.name, icon: image[place.tag] }); marker.mycategory = category; gmarkers.push(marker); google.maps.event.addListener(marker, 'click', function() { if (infowindow) infowindow.close(); infowindow = new google.maps.InfoWindow({ content: "
"+ place.name +"
" + place.tag +"
Show more!" }); infowindow.open(map, marker); }); } function show(category) { for (var i=0; i<gmarkers.length; i++) { if (gmarkers[i].mycategory == category) { gmarkers[i].setVisible(true); } } document.getElementById(category+"box").checked = true; } function hide(category) { for (var i=0; i<gmarkers.length; i++) { if (gmarkers[i].mycategory == category) { gmarkers[i].setVisible(false); } } document.getElementById(category+"box").checked = false; infowindow.close(); } function boxclick(box,category) { if (box.checked) { show(category); } else { hide(category); } } } jQuery(document).ready(function(){ mapInit(); }); 

Answer 1

您的问题是boxclick()函数包含在boxclick()函数的范围内，因此无法从外部mapInit()访问mapInit() 。 您应该从HTML输入字段中删除onclick事件，然后在mapInit()函数中定义事件处理程序，如下所示：

 function mapInit() { // ... $('#attractionbox').click(function () { boxclick(this, 'attraction'); }); }