javascript – 使用复选框过滤Google地图标记

我试图根据 this V3 example从一个复选框过滤我的谷歌地图标记.我的复选框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>

我的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,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();
});

解决方法

你的问题是Boxclick()函数包含在mapInit()函数的范围内,因此Boxclick()不能从外面的mapInit()访问.您应该从HTML输入字段中删除onclick事件,然后在mapInit()函数中定义事件处理函数,如下所示：

function mapInit() {

  // ...

  $('#attractionBox').click(function () {
    Boxclick(this,'attraction');
  }); 
}

原文地址：https://www.jb51.cc/js/152114.html