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

Filtering google maps markers with a checkbox

提问by Budgie

I'm trying to filter my google maps markers from a checkbox, based on this V3 example. My checkbox html is:

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

<form action="#">
  Attractions: <input type="checkbox" id="attractionbox" onclick="boxclick(this,'attraction')" /> &nbsp;&nbsp;
  Food and Drink: <input type="checkbox" id="foodbox" onclick="boxclick(this,'food')" /> &nbsp;&nbsp;
  Hotels: <input type="checkbox" id="hotelbox" onclick="boxclick(this,'hotel')" /> &nbsp;&nbsp;
  Towns/Cities: <input type="checkbox" id="citybox" onclick="boxclick(this,'city')" /><br />
</form>

My javascript is below. I can't seem to get the filters to work - at present all the markers appear on the map regardless of the state of the checkboxes. I'm guessing I've just got some of my variables in the wrong place, but I haven't been able to crack the problem so far! Any help would be much appreciated.

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

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: "<h3>"+ place.name +"</h3><p>" + place.tag +"</p><a href='/places/"+place.id+"'>Show more!</a>"
        });
        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();
});

采纳答案by Daniel Vassallo

Your problem is that the boxclick()function is enclosed within the scope of the mapInit()function, and therefore boxclick()is not accessible from outside mapInit(). You should remove the onclickevents from your HTML input fields, and then define the event handlers within the mapInit()function as follows:

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

function mapInit() {

  // ...

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