用复选框过滤谷歌地图标记 [英] Filtering google maps markers with a checkbox
本文介绍了用复选框过滤谷歌地图标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图根据这个V3示例从复选框中过滤我的Google地图标记>。我的复选框HTML是：
< form action =＃>
景点：< input type =checkboxid =attractionboxonclick =boxclick（this，'attraction'）/> &安培; NBSP;&安培; NBSP;
食物和饮料：< input type =checkboxid =foodboxonclick =boxclick（this，'food'）/> &安培; NBSP;&安培; NBSP;
酒店：< input type =checkboxid =hotelboxonclick =boxclick（this，'hotel'）/> &安培; NBSP;&安培; NBSP;
城镇：< input type =checkboxid =cityboxonclick =boxclick（this，'city'）/>< br />
< / form>
我的javascript在下面。我似乎无法让过滤器正常工作 - 目前，无论复选框的状态如何，所有标记都会显示在地图上。我猜测我刚刚在错误的地方得到了一些变数，但迄今为止我一直无法解决这个问题！任何帮助将不胜感激。
var map;
var infowindow;
var image = [];
var gmarkers = [];
图片['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';
函数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 +'>显示更多！< / a>
}）;
infowindow.open（map，marker）;
}）;
}
函数show（category）{
for（var i = 0; i
gmarkers [i] .setVisible（true）;
}
}
document.getElementById（category +box）。checked = true;
函数hide（category）{
for（var i = 0; i
gmarkers [i] .setVisible（false）;
}
}
document.getElementById（category +box）。checked = false;
infowindow.close（）;
函数boxclick（box，category）{
if（box.checked）{
show（category）;
} else {
hide（category）;
$ j jQuery（document）.ready（function（）{
mapInit（）;
}）;
解决方案
您的问题在于 boxclick（）函数包含在 mapInit（）函数的范围内，因此 boxclick（）不能从外部 mapInit（）访问。您应该从HTML输入字段中移除 onclick 事件，然后在 mapInit（）函数中定义事件处理程序如下所示：
函数mapInit（）{
// ...
$（'＃attractionbox'）。click（function（）{
boxclick（this，'attraction'）;
}）;
}
I'm trying to filter my google maps markers from a checkbox, based on this V3 example. My checkbox html is:
<form action="#">
Attractions: <input type="checkbox" id="attractionbox" onclick="boxclick(this,'attraction')" />
Food and Drink: <input type="checkbox" id="foodbox" onclick="boxclick(this,'food')" />
Hotels: <input type="checkbox" id="hotelbox" onclick="boxclick(this,'hotel')" />
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.
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();
});
解决方案
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 onclick events from your HTML input fields, and then define the event handlers within the mapInit() function as follows:
function mapInit() {
// ...
$('#attractionbox').click(function () {
boxclick(this, 'attraction');
});
}
这篇关于用复选框过滤谷歌地图标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
