我要显示一个地图标记,但不能显示多个标记。
但是,数据显示在HTML日志中。我认为我错过了一个循环或没有正确使用我的当前循环。
任何可以澄清的人都会让我高兴。
谢谢。
随附代码:
<?php get_header(); ?>
<!-- Row for main content area -->
<div class="small-12 large-12 columns" id="content" role="main">
<h1 class="entry-title">Find a store</h1>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -28.5758488, lng: 25.1128267},
zoom: 5
});
setMarkers(map);
}
;
</script>
<div id="map"></div>
<?php
$args = array('post_type' => 'store', array("output" => "raw"), 'posts_per_page' => 50,);
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post();
?>
<?php $lat = types_render_field("lat", array("output" => "raw")); ?>
<?php $long = types_render_field("long", array("output" => "raw")); ?>
<script type="text/javascript">
var lat = <?php echo $lat; ?>;
var long = <?php echo $long; ?>;
var locations = [
['<?php the_title(); ?>', lat, long]
];
function setMarkers(map) {
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var marker = new google.maps.Marker({
position: {lat: location[1], lng: location[2]},
map: map,
title: location[0],
});
}
}
</script>
<?php endwhile; // End the loop ?>
<script src="https://maps.googleapis.com/maps/api/..." async defer></script>
</div>
<?php get_footer(); ?>
这是控制台日志中的输出脚本:
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -28.5758488, lng: 25.1128267},
zoom: 5
});
setMarkers(map);
}
;
</script>
<div id="map"></div>
<script type="text/javascript">
function setMarkers(map) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng({lat: -25.746111, lng: 28.188056}),
map: map,
title: 'Willow Way Spar'
});
}
</script>
<script type="text/javascript">
function setMarkers(map) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng({lat: -29.919885, lng: 30.941782}),
map: map,
title: 'Yellowwood park Superspar'
});
}
</script>
<script type="text/javascript">
function setMarkers(map) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng({lat: -26.8598225, lng: 26.6317514}),
map: map,
title: 'Zest for Health'
});
}
</script>
<script type="text/javascript">
function setMarkers(map) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng({lat: -25.8299422, lng: 28.2819103}),
map: map,
title: 'Zest Wellness Centre'
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/..." async defer></script>
</div>
...并且使用以下代码我得到相同的结果:
<?php get_header(); ?>
<!-- Row for main content area -->
<div class="small-12 large-12 columns" id="content" role="main">
<h1 class="entry-title">Find a store</h1>
<script type="text/javascript">
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -28.5758488, lng: 25.1128267},
zoom: 5
});
setMarkers(map);
}
;
</script>
<div id="map"></div>
<?php
$args = array('post_type' => 'store', array("output" => "raw"), 'posts_per_page' => 50,);
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post();
?>
<?php $lat = types_render_field("lat", array("output" => "raw")); ?>
<?php $long = types_render_field("long", array("output" => "raw")); ?>
<script type="text/javascript">
var lat = <?php echo $lat; ?>;
var long = <?php echo $long; ?>;
</script>
<script>
function setMarkers(map) {
var marker = new google.maps.Marker({
position: {lat: lat, lng: long},
map: map,
title: '<?php the_title(); ?>',
});
}
</script>
<?php wp_reset_postdata(); ?>
<?php endwhile; // End the loop ?>
<script src="https://maps.googleapis.com/maps/api/..." async defer></script>
</div>
<?php get_footer(); ?>
随附指向测试页面的链接:
http://www.golonutrition.co.za/find-a-store/
最佳答案
您正在一次又一次地在while循环中初始化整个map对象。您希望将其带出循环,而仅在循环中设置标记。