过滤谷歌地图标记与复选框和高级自定义字段
问题描述:
我正在使用高级自定义字段添加谷歌地图标记在WordPress中。我有一套过滤器来对标记进行分类。我的目标是仅显示选中过滤器的地图标记。我发现了堆栈溢出的几个例子,但这些例子中的大多数都使用json数据或静态数组。我的JS技能不在我可以将其转换成我的情况的水平。过滤谷歌地图标记与复选框和高级自定义字段
下面是过滤器,这将是地图上方的HTML:
<article class="map-filters">
<div class="map-filters__inner">
<ul class="map-filters__wrap">
<li><label for="category1"><input type="checkbox" name="filter" value="category1" id="category1" checked>Category 1</label></li>
<li><label for="category2"><input type="checkbox" name="filter" value="category2" id="category2" checked>Category 2</label></li>
<li><label for="category3"><input type="checkbox" name="filter" value="category3" id="category3" checked>Category 3</label></li>
</ul>
</div>
</article>
这里是地图本身的HTML。同样,我使用ACF中继域动态添加地图标记,但我在这个例子的目的而提供的静态HTML:
<article id="js-community-map" class="community-map">
<div class="marker" data-category="category1" data-icon="category1.png" data-lat="35.9491598" data-lng="-115.1354093">Marker Content</div>
<div class="marker" data-category="category2" data-icon="category2.png" data-lat="35.9320515" data-lng="-115.1236344">Marker Content</div>
<div class="marker" data-category="category3" data-icon="category2.png" data-lat="35.9327263" data-lng="-115.1246636">Marker Content</div>
</article>
最后,是JS。由于使用了高级自定义字段,您会发现它与典型的Google Maps JS略有不同,但应该非常相似。我遇到的问题是我不知道在这段代码中添加过滤功能的位置。我的过滤代码也可能不正确。我曾尝试在几个地方添加过滤,包括new_map函数,但似乎没有任何工作。如果有人能帮助我解决这个问题,将不胜感激。
(function($) {
// New Map
// This function will render a Google Map onto the selected jQuery element
function new_map($el) {
// var
var $markers = $el.find('.marker');
// args
var args = {
zoom : 16,
center : new google.maps.LatLng(0, 0),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// create map
var map = new google.maps.Map($el[0], args);
// add a markers reference
map.markers = [];
// add markers
$markers.each(function(){
add_marker($(this), map);
});
// center map
center_map(map);
// return
return map;
}
// Add Marker
function add_marker($marker, map) {
// vars
var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));
var category = $marker.data('category'); // Get category name from data
// create marker
var marker = new google.maps.Marker({
position : latlng,
map : map,
category : category, // store category as property of marker
icon : iconUrl.image + $marker.attr('data-icon') // Custom icon from data attribute
});
// add to array
map.markers.push(marker);
// if marker contains HTML, add it to an infoWindow
if($marker.html()) {
// create info window
var infowindow = new google.maps.InfoWindow({
content : $marker.html()
});
// show info window when marker is clicked
google.maps.event.addListener(marker, 'click', function() {
map.panTo(this.getPosition());
map.setZoom(15);
infowindow.open(map, marker);
});
}
}
// Center Map
function center_map(map) {
// vars
var bounds = new google.maps.LatLngBounds();
// loop through all markers and create bounds
$.each(map.markers, function(i, marker){
var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
bounds.extend(latlng);
});
// only 1 marker?
if(map.markers.length == 1) {
// set center of map
map.setCenter(bounds.getCenter());
map.setZoom(16);
} else {
// fit to bounds
map.fitBounds(bounds);
}
}
// Document Ready
// global var
var map = null;
$(document).ready(function(){
$('#js-community-map').each(function(){
// create map
map = new_map($(this));
});
});
})(jQuery);
这是我正在尝试使用的过滤功能。请让我知道是否需要更改此代码。另外,如果你能帮我把它放在上面的JS中,这将是非常有帮助的。
$(document).on('click', '.map-filters__wrap label', function(){
$.each(map.markers, function(i, marker) {
if(marker.category == category) {
marker.visible = true;
} else {
marker.visible = false;
}
});
});
答
对于需要使用ACF Google地图进行过滤的用户,我可以自己弄清楚这一点!
这里是更新JS与过滤器的工作:
(function($) {
// New Map
// This function will render a Google Map onto the selected jQuery element
function new_map($el) {
// var
var $markers = $el.find('.marker');
// vars
var args = {
zoom : 16,
center : new google.maps.LatLng(0, 0),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// create map
var map = new google.maps.Map($el[0], args);
// add a markers reference
map.markers = [];
// add markers
$markers.each(function(){
add_marker($(this), map);
});
// Filter Markers
$('.map-filters__wrap').on('change', 'input[type="checkbox"]', function ({
filter = $(this);
filterValue = filter.val();
if(filter.is(':checked')) {
map.markers.forEach(function(element) {
if(element.category == filterValue) {
element.setVisible(true);
}
});
} else {
map.markers.forEach(function(element) {
if(element.category == filterValue) {
element.setVisible(false);
}
});
}
});
// center map
center_map(map);
// return
return map;
}
// Add Marker
function add_marker($marker, map) {
// var
var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));
var category = $marker.data('category'); // Get category name from data
// create marker
var marker = new google.maps.Marker({
position : latlng,
draggable : true, // set marker to draggable to hide duplicates
crossOnDrag : false, // hide cross icon on drag event
map : map,
category : category, // store category as property of marker
icon : iconUrl.image + $marker.attr('data-icon') // Custom icon from data attribute
});
// add to array
map.markers.push(marker);
// if marker contains HTML, add it to an infoWindow
if($marker.html()) {
// create info window
var infowindow = new google.maps.InfoWindow({
content : $marker.html()
});
// show info window when marker is clicked
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
}
// Center Map
function center_map(map) {
// vars
var bounds = new google.maps.LatLngBounds();
// loop through all markers and create bounds
$.each(map.markers, function(i, marker){
var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
bounds.extend(latlng);
});
// only 1 marker?
if(map.markers.length == 1) {
// set center of map
map.setCenter(bounds.getCenter());
map.setZoom(16);
} else {
// fit to bounds
map.fitBounds(bounds);
}
}
// Document Ready
// global var
var map = null;
$(document).ready(function(){
$('#js-community-map').each(function(){
// create map
map = new_map($(this));
});
});
})(jQuery);
答
感谢您的例子,我是新来这,这是非常有帮助!
只是一个小的观察,可以做一些其他新手有点迷惑,有一个非常小的语法错误的位置:
筛选标记
$('.map-filters__wrap').on('change', 'input[type="checkbox"]', function ({
有一个)
失踪那里,应该是:
过滤器标记
$('.map-filters__wrap').on('change', 'input[type="checkbox"]', function() {
这是非常有用的信息在答案本身。我建议你编辑答案以解决语法错误的问题,这种方式总是让人们在将来看到,而不必滚动浏览所有答案。 – Taegost
这不提供问题的答案。一旦你有足够的[声誉](https://*.com/help/whats-reputation),你将可以[对任何帖子发表评论](https://*.com/help/privileges/comment);相反,[提供不需要提问者澄清的答案](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can- I-DO-代替)。 - [来自评论](/ review/low-quality-posts/18669589) – etarion