0
私はgoogleマップとacfを使ってwordpressサイトにマップを構築しています。私の目標はカテゴリ別にフィルタリング可能な地図を作成することです。投稿は都市であり、カテゴリに分類され、カテゴリは国です。各カテゴリのラジオボタンのリストを作成しました。クリックすると、一度に1つのカテゴリしか表示されません。Wordpress ACFとカテゴリ別Googleマップフィルタ...とズーム
ラジオボタンをクリックしたときに、国のマーカーが表示されたら、国を拡大したいと思います。地図は同じズームレベルにとどまります。ウェブ上には多くの類似の例があることはわかっていますが、ラジオボタンをクリックすると地図を拡大するものはありません。 そんなことができるかどうか教えてくれる人はいますか？ 私もクラスターで試してみましたが、その場合はズームが機能しますが、フィルター（ラジオボタンまたはチェックボックスを選択して.. ..）で動作させるのが難しいです。 私を助けることができる人の前に感謝！ :)ここ
はここ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>
ヘルプはありませんか？ – blogob
まだこの問題がありますか？単に 'panTo'関数を使い、' setZoom'を使って地図のズームを変えてください。ドキュメントを確認してください：https://developers.google.com/maps/documentation/javascript/examples/event-simple – henrisycip