我想在WordPress functions.php中添加多个Google地图,但只显示最后一张地图。
如何显示多张地图?是否可以创建一个短代码循环?
我试图用$ arg或随机ID替换var“map”但没有成功。
add_shortcode( 'map', 'gmaps_map' );
function gmaps_map( $args ) {
$id = substr( sha1( "Google Map" . time() ), rand( 2, 10 ), rand( 5, 8 ) );
ob_start();
$args = shortcode_atts( array(
'lat' => '49',
'lng' => '9',
'zoom' => '12',
'height' => '300px',
'id' => '0'
), $args, 'map' );
?>
<div class='map' style='height:<?php echo $args['height'] ?>;' id='map-<?php echo $id ?>'></div>
<script type='text/javascript'>
var <?php echo $args['id'] ?>;
function initMap() {
map = new google.maps.Map(document.getElementById('map-<?php echo $id ?>'), {
center: {lat: <?php echo $args['lat'] ?>, lng: <?php echo $args['lng'] ?>},
zoom: <?php echo $args['zoom'] ?>
});
var image = new google.maps.MarkerImage("<?php echo get_template_directory_uri(); ?>/images/marker.png", null, null, null, new google.maps.Size(64,64));
var marker = new google.maps.Marker({
position: {lat: <?php echo $args['lat'] ?>, lng: <?php echo $args['lng'] ?>},
map: map,
icon: image, // null = default icon
animation: google.maps.Animation.DROP,
title: 'Hello World!'
});
}
</script>
<?php
$output = ob_get_clean();
return $output;
}
add_action( 'wp_enqueue_scripts', 'gmaps_enqueue_assets' );
function gmaps_enqueue_assets() {
wp_enqueue_script(
'google-maps',
'//maps.googleapis.com/maps/api/js?callback=initMap',
array(),
'1.0',
true
);
}
这适用于单独的js文件(不在functions.php短代码中)
function initMap(id, lang, long) {
var map = new google.maps.Map(document.getElementById(id), {
center: {lat: lang, lng: long},
zoom: 13
});
var image = new google.maps.MarkerImage("/images/marker.png", null, null, null, new google.maps.Size(64,64));
var marker = new google.maps.Marker({
position: {lat: lang, lng: long},
map: map,
icon: image, // null = default icon
animation: google.maps.Animation.DROP,
title: 'Hello World!'
});
}
$(document).ready(function() {
$('.map').each(function() {
initMap($(this).attr('id'), parseFloat($(this).data('lat')), parseFloat($(this).data('lng')));
});
});