我在wordpress网站上使用谷歌地图和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 : 4,
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
// Filter Markers
$('.virtual-map-filter').on('change', 'input[type="radio"]', function() {
filter = $(this);
filterValue = filter.val();
if(filter.is(':checked')) {
map.markers.forEach(function(element) {
if(element.category == filterValue) {
element.setVisible(true);
}else{
element.setVisible(false);
}
});
}
else
{
map.markers.forEach(function(element) {
if(element.category != filterValue) {
element.setVisible(false);
}
});
}
});
$markers.each(function(){
add_marker( $(this), map );
});
// 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
});
// add to array
map.markers.push( marker );
//first hide all the markers
marker.setVisible(false);
// 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() {
if (typeof( window.infoopened ) != 'undefined') infoopened.close();
infowindow.open(map,marker);
infoopened = infowindow;
});
}
}
// 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 );
map.fitBounds(bounds);
});
// 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(){
$('.acf-map').each(function(){
// create map
map = new_map( $(this) );
});
});
})(jQuery);
这里是html / php部分
<div class="map-container">
<?php
$terms = get_field('category_select');
if( $terms ): ?>
<?php foreach( $terms as $term ):
$args = array(
'post_type' => 'post',
'category__in' => $term
);
$the_query = new WP_Query($args);
;?><div class="acf-map"><?php
while ( $the_query->have_posts() ) : $the_query->the_post();
$location = get_field('google_maps');?>
<?php
if( !empty($location) ) {
?>
<div class="marker" data-category="<?php echo $term->slug ;?>" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
<?php the_post_thumbnail('thumbnail'); ?>
<h4><a href="<?php the_permalink(); ?>" rel="bookmark"> <?php the_title(); ?></a></h4>
<p class="address"><?php echo $location['address']; ?></p>
</div>
<?php
}
endwhile;
wp_reset_postdata();
endforeach ;?>
<?php endif; ?>
</div>
</div>
答案 0 :(得分：0)
谢谢！ 最后我设法做到了，但代码可能不是最好的..我保持php文件相同，但改变了像这样的js文件： - 在new_map函数中，我添加了一个新的＆＃39; google.maps.LatLngBounds（）＆＃39;如果标记是可见的，我用以下内容扩展边界：＆＃39; bounds.extend（$ markers.getPosition（））＆＃39;。首先，我的所有标记都被隐藏，其中包含标记.setVisible（false）＆＃39;在add_marker函数中。当我点击一个单选按钮时，地图缩放到所选国家!! 问题是，我不知道这是否是最佳方式......如果您有任何建议！感谢
(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 : 4,
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
$('.virtual-map-filter').on('change', 'input[type="radio"]', function()
{
filter = $(this);
filterValue = filter.val();
if(filter.is(':checked')) {
var bounds = new google.maps.LatLngBounds();
map.markers.forEach(function( $markers) {
if( $markers.category == filterValue) {
$markers.setVisible(true);
bounds.extend( $markers.getPosition() );
}else{
$markers.setVisible(false);
}
});
map.fitBounds(bounds);
}
});
// 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
});
// add to array
map.markers.push( marker );
//first hide all the markers
marker.setVisible(false);
// 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() {
if (typeof( window.infoopened ) != 'undefined')
infoopened.close();
infowindow.open(map,marker);
infoopened = infowindow;
});
}
}
// 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 );
map.fitBounds(bounds);
});
// 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(){
$('.acf-map').each(function(){
// create map
map = new_map( $(this) );
});
});
})(jQuery);