我正在用Wordpress中一系列帖子的元数据生成一个地图。地图和点生成得很好,但当我点击点时,信息窗口总是在同一个地方生成,而不是在我点击的点上。有人能帮我吗,我在v2中运行得很好,但我无法计算出3。
在循环中生成的地图如下:
function initialize(){
var myLatlng = new google.maps.LatLng(45, -123);
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('travel_map'), myOptions);
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
$my_post = get_post($post_id);
$mapTitle = $my_post->post_title;
$lat = get_post_meta($post->ID, 'latitude', true);
$long = get_post_meta($post->ID, 'longitude', true);
?>
var contentString = 'test';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $lat . ", " . $long ?>),
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
<?php endwhile; ?>
<?php endif; ?>
}
http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/
这里介绍了如何在页面上使用多个标记和多个信息窗口。
下面是实现:
<script type="text/javascript">
var infowindow = null;
var markers = [];
function initialize(){
var myLatlng = new google.maps.LatLng(45, -123);
var myOptions = {
zoom: 3,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('travel_map'), myOptions);
infowindow = new google.maps.InfoWindow({
content: "holding..."
});
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
$my_post = get_post($post_id);
$mapTitle = $my_post->post_title;
$lat = get_post_meta($post->ID, 'latitude', true);
$long = get_post_meta($post->ID, 'longitude', true);
?>
var marker = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $lat . ", " . $long ?>),
map: map,
html: "<b><?php echo $mapTitle; ?></b><br><br><?php echo $my_post; ?>"
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
<?php endwhile; ?>
<?php endif; ?>
}
</script>