在从自定义帖子类型获取纬度和经度时,我遇到了一些使Google Maps API V3工作的问题。我以前在从单独的数据库中直接提取数据时工作。但是,当更改此选项以使用WP_Query从帖子类型中提取数据时,Google Maps API不会显示地图标记,因为它似乎不接受格式(我假设)。
以下是我用来从post类型中提取数据并存储在PHP数组中的代码:
$args = array (
'post_type' => array( 'card' ),
'posts_per_page' => '-1',
);
// The Query
$site_query = new WP_Query( $args );
$result = array();
// The Loop
if ( $site_query->have_posts() ) {
while ( $site_query->have_posts() ) {
$site_query->the_post();
$sitename = get_post_meta( get_the_ID(), 'siteName', true );
$addr1 = get_post_meta( get_the_ID(), 'addr1', true );
$addr2 = get_post_meta( get_the_ID(), 'addr2', true );
$op1 = get_post_meta( get_the_ID(), 'op1', true );
$priceclass = get_post_meta( get_the_ID(), 'price_class', true );
$longitude = get_post_meta( get_the_ID(), 'longitude', true );
$latitude = get_post_meta( get_the_ID(), 'latitude', true );
$result[] = array(
'siteName' => $sitename,
'addr1' => $addr1,
'addr2' => $addr2,
'op1' => $op1,
'price_class' => $priceclass,
'longitude' => $latitude,
'latitude' => $latitude,
);
}
}
wp_reset_postdata();
然后我将其存储在JavaScript变量中:
var locations = <?php echo json_encode($result); ?>;
控制台日志显示此数据按预期到达并存储为对象。我已经跳过了基本的Google Maps initalisation,这里的代码应该在地图上打印标记。
for(var v = 0; v < locations.length; v++) {
if(locations[v].op1 == "Open 24 Hours"){
console.log(locations[v].latitude);
console.log(locations[v].longitude);
if (circle.contains(new google.maps.LatLng(locations[v].latitude, locations[v].longitude))) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[v].latitude, locations[v].longitude),
map: map,
icon: {
url: '<?php echo get_template_directory_uri();?>/img/contact_map_pin1.png',
size: new google.maps.Size(40, 50),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(20, 50)
}
});
gmarkers.push(marker);
var infowindow = new google.maps.InfoWindow({content: info_content});
var info_content =
'<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="iw-title">'+ locations[v].siteName + '</h1>'+
'<div id="bodyContent">'+
'</div>'+
'<p class="infobox-address">' + locations[v].addr1 + '<br>' + locations[v].addr2 + '<br>' + locations[v].addr3 + '<br>' + locations[v].postcode + '</p>'+
'</div>';
google.maps.event.addListener(marker, 'click', getInfoCallback(map, info_content));
jQuery('.locations-section').append('<div class="location-single"><a href="https://www.google.com/maps/place/'+ locations[v].latitude +','+ locations[v].longitude +'" target="_blank"><i class="fa fa-download" aria-hidden="true"></i></a><h3>'+ locations[v].siteName + '</h3><p>' + locations[v].addr1 + '<br>' + locations[v].addr2 + '<br>' + locations[v].addr3 + '<br>' + locations[v].postcode + '</p></div><div class="clear"></div></div>');
}
}
}
此处的console.log显示locations[v].latitude
和locations[v].longitude
的正确值已达到此点,但未使用Google Maps API。
我不明白为什么这样做,并尝试将经度和经度转换为在PHP和JavaScript中键入float但似乎没有任何效果。任何人都可以解释什么是错的吗?