我正在尝试使用包含地图坐标的自定义字段“latlng”在 Google 地图上显示 Wordpress 自定义帖子“位置”。我在这里找到了有关如何执行此操作的说明:
不幸的是,由于我不知道的原因,我的地图根本没有显示。我将在下面发布我的代码,我已尝试将其适应我的情况,但我对 PHP 和 Javascript 的理解非常有限。我打开了firebug,但没有看到任何错误。地图所在的页面在这里:
http://pbcecology.thelongmoment.com/directory/
我的地图页面.php:
<?php
$args = array(
'post_type' => 'location', // or define custom post type here
'meta_key' => latlng // whatever key you have given your custom meta
);
$map_page = new WP_Query($args);
if( $map_page->have_posts() ) : ?>
<div style="display: none;">
<?php $i = 1;
while ( $map_page->have_posts() ) : $map_page->the_post();
// just test to see if there is a lat value - if so carry on
if ( get_post_meta($post->ID, latlng, true) !== '' ) : ?>
<div id="item<?php echo $i; ?>"
// pull in your post thumbnail
<?php get_the_image( array( 'meta_key' => 'Thumbnail', 'size' => 'thumbnail' ) ); ?>
// pull in your post permalink
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
// in fact pull in any other data from your post that you might want to use ;)
</div>
<?php endif; ?>
<?php $i++; ?>
<?php endwhile; ?>
</div>
<div id="map-canvas" style="width:100%; height:600px;"></div>
<script type="text/javascript">
var locations = [
<?php $i = 1; while( $map_page->have_posts() ) : $map_page->the_post();
// pull out our lattitude and longitude values and concatenate to use in Google maps
if ( get_post_meta($post->ID, latlng, true) !== '' ) :
$latlong = get_post_meta($post->ID, latlng, true);
$latlng = "$latlng";
?>
{
latlng : new google.maps.LatLng<?php echo $latlng; ?>,
info : document.getElementById('item<?php echo $i; ?>')
},
<?php endif; ?>
<?php $i++; endwhile; ?>
];
</script>
<?php
else :
endif; ?>
我的 map.js:
var infowindow = new google.maps.InfoWindow();
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 6,
center: new google.maps.LatLng(54.072283,-125.093995),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
});
var markers = [];
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: locations[i].latlng,
map: map
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i].info);
infowindow.open(map, marker);
}
})(marker, i));
}
// the following var sets up varying sized icons to be used at different zoom levels with markerClusterer
// http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html
var styles = [{
url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png',
height: 50,
width: 50
}, {
url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m3.png',
height: 60,
width: 60
}, {
url: 'http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m4.png',
height: 75,
width: 75
}];
var mcOptions = {gridSize: 40, maxZoom: 15, styles: styles};
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
}
根据说明,我还有一个 markerclusterer.js,我不会发布它的代码(除非有要求,但我是从 Google Maps Utility Library 获得的)。
您可以提供的任何见解将不胜感激!