我要显示一个地图标记，但不是多个标记。
然而，数据显示在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(); ?>
此处有测试页面的链接：
答案 0 :(得分：1)
您一次又一次地在while循环内初始化整个地图对象。您希望将其从循环中取出并仅在循环中设置标记。
答案 1 :(得分：0)
为了避免这种问题，我认为最好通过ajax Requette恢复结果并直接使用lat和long变量javascript
答案 2 :(得分：0)
这就是答案。非常感谢@Dan。
<?php
$storeData = [];
$args = ['post_type' => 'store'];
$loop = new WP_Query($args);
foreach ($loop->posts as $post) {
$storeData[] = [
'title' => apply_filters('the_title', $post->post_title),
'lat' => types_render_field('lat', ['output' => 'raw']),
'long' => types_render_field('long', ['output' => 'raw']),
];
}
wp_localize_script('jquery-core', 'storeData', $storeData);?>
<?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>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/..." async defer></script>
<script type="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: new google.maps.LatLng(-27.2758488, 26.1128267),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var j = storeData.length;
for (i = 0; i < j; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(storeData[i].lat, storeData[i].long),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(storeData[i].title);
infowindow.open(map, marker);
}
})(marker, i));
}
};
</script>