0
我目前正在建立一个谷歌地图,它从wordpress中的3个不同类别的自定义帖子类型中提取纬度/经度坐标。我在学习的过程中建立了这一点,但努力想通过一个共享单个infowindow的问题。谷歌地图Infowindow分享
这是代码。
(function() {
window.onload = function() {
// Creating an object literal containing the properties // we want to pass to the map
var options = {
zoom: 8,
center: new google.maps.LatLng(53.789397,-2.255003), mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Creating the map
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
var commercialplaces = [];
var commercialmyTitle = [];
var commercialmyContent = [];
var housingplaces = [];
var housingmyTitle = [];
var housingmyContent = [];
var riversideplaces = [];
var riversidemyTitle = [];
var riversidemyContent = [];
// Adding a marker to the map
<?php
query_posts(array(
'post_type' => 'livesites',
'livesites-cat'=> 'commercial',
'showposts' => 1000,
'order' => ASC,
'orderby' => title,
));
if (have_posts()) : while (have_posts()) : the_post();
?>
commercialmyTitle.push('<?php the_title(); ?>');
commercialmyContent.push('<?php the_field('address'); ?>');
commercialplaces.push(new google.maps.LatLng(<?php the_field('location_for_map'); ?>));
<?php endwhile; endif; wp_reset_query(); ?>
// Looping through the commercialplaces array
for (var i = 0; i < commercialplaces.length; i++) {
// Adding the marker as usual
var marker = new google.maps.Marker({
position: commercialplaces[i],
map: map,
title: commercialmyTitle[i],
icon: 'http://icansee.co.uk/commerciallivesite.png',
});
// Wrapping the event listener inside an anonymous function
// that we immediately invoke and passes the variable i to.
(function(i, marker) {
// Creating the event listener. It now has access to the values of
// i and marker as they were during its creation
google.maps.event.addListener(marker, 'click', function() {
var infowindow = new google.maps.InfoWindow({
content: commercialmyContent[i],
});
infowindow.open(map, marker);
});
})(i, marker);
}
// Adding a marker to the map
<?php
query_posts(array(
'post_type' => 'livesites',
'livesites-cat'=> 'housing',
'showposts' => 1000,
'order' => ASC,
'orderby' => title,
));
if (have_posts()) : while (have_posts()) : the_post();
?>
housingmyTitle.push('<?php the_title(); ?>');
housingmyContent.push('<?php the_field('address'); ?>');
housingplaces.push(new google.maps.LatLng(<?php the_field('location_for_map'); ?>));
<?php endwhile; endif; wp_reset_query(); ?>
// Looping through the commercialplaces array
for (var i = 0; i < housingplaces.length; i++) {
// Adding the marker as usual
var marker = new google.maps.Marker({
position: housingplaces[i],
map: map,
title: housingmyTitle[i],
icon: 'http://icansee.co.uk/housinglivesite.png',
});
// Wrapping the event listener inside an anonymous function
// that we immediately invoke and passes the variable i to.
(function(i, marker) {
// Creating the event listener. It now has access to the values of
// i and marker as they were during its creation
google.maps.event.addListener(marker, 'click', function() {
var infowindow = new google.maps.InfoWindow({
content: housingmyContent[i],
});
infowindow.open(map, marker);
});
})(i, marker);
}
// Adding a marker to the map
<?php
query_posts(array(
'post_type' => 'livesites',
'livesites-cat'=> 'riverside-interiors',
'showposts' => 1000,
'order' => ASC,
'orderby' => title,
));
if (have_posts()) : while (have_posts()) : the_post();
?>
riversidemyTitle.push('<?php the_title(); ?>');
riversidemyContent.push('<?php the_field('address'); ?>');
riversideplaces.push(new google.maps.LatLng(<?php the_field('location_for_map'); ?>));
<?php endwhile; endif; wp_reset_query(); ?>
// Looping through the commercialplaces array
for (var i = 0; i < riversideplaces.length; i++) {
// Adding the marker as usual
var marker = new google.maps.Marker({
position: riversideplaces[i],
map: map,
title: riversidemyTitle[i],
icon: 'http://icansee.co.uk/interiorlivesite.png',
});
// Wrapping the event listener inside an anonymous function
// that we immediately invoke and passes the variable i to.
(function(i, marker) {
// Creating the event listener. It now has access to the values of
// i and marker as they were during its creation
google.maps.event.addListener(marker, 'click', function() {
var infowindow = new google.maps.InfoWindow({
content: riversidemyContent[i],
});
infowindow.open(map, marker);
});
})(i, marker);
}
}
})();
任何人都可以引导我在正确的方向吗?
“共享单一的信息窗口”。 ..你能详细说明吗? – Rafe 2013-03-06 11:42:00
我已经读过a3的v3现在以不同的方式处理infowindows,我所拥有的是每个标记的infowindow的单独实例,这意味着它们都可以同时打开。我读过每个标记可以共享一个infowindow的单个实例并相应地调整内容? – 2013-03-06 12:45:25