我正在使用信息框插件创建具有不同内容的多个标记 - http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/infobox-basic.html
此外，我使用markerclusterer插件在同一区域处理太多标记 - http://gmaps-utility-library-dev.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer.js
所有标记都正确显示，并且聚类工作正常。
问题。我的问题是我怎么能只点击一个信息框并关闭其他信息框，如果你选择另一个，它会打开并关闭其他信息。
以下是我当前的代码[已更新]：http://jsfiddle.net/henrichro/mqrrA/
<script type="text/javascript" src="<?php echo get_bloginfo('template_directory'); ?>/js/markerclusterer.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js"></script>
<script type="text/javascript">
// build portfolios list
var portfolios = [
<?php
global $post;
$type = 'portfolio';
$args = array(
'post_type' => $type,
'post_status' => 'publish',
'posts_per_page' => -1,
'caller_get_posts'=> 1
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post();
$my_id = get_the_ID();
$my_title = get_the_title($my_id);
$my_permalink = get_permalink($my_id);
$site_type = get_the_terms($my_id,'type');
if ( $site_type ) {
foreach ( $site_type as $st ) {
if ( $st->slug == 'cultural' ) {
$icon_type = get_bloginfo('template_directory').'/img/icon_blue.png';
} elseif ( $st->slug == 'natural' ) {
$icon_type = get_bloginfo('template_directory').'/img/icon_green.png';
} else {
$icon_type = get_bloginfo('template_directory').'/img/icon_mixed.png';
}
}
} else {
$icon_type = "marker.setIcon(null)";
}
if (get_post_meta($post->ID,'_my_meta',TRUE)) :
$key_meta = get_post_meta($post->ID,'_my_meta',TRUE);
endif;
if($key_meta[coord_lat] && $key_meta[coord_long]):
$lat = $key_meta[coord_lat];
$long = $key_meta[coord_long];
else :
$lat = '';
$long = '';
endif;
?>
['<?php echo $my_title; ?>', <?php echo $lat; ?>, <?php echo $long; ?>, '<?php echo $icon_type; ?>', '<?php echo $my_permalink; ?>'],
<?php
endwhile;
}
//wp_reset_query();
?>
];
function initialize() {
// pointing the center of the universe
var latlng = new google.maps.LatLng(0, 0);
// setting the map options
var myMapOptions = {
zoom: 2,
center: latlng,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
// creating the map
var map = new google.maps.Map(document.getElementById("googlemap"),myMapOptions);
// list of the coordinates/positions
var latlnglist = []
// bounding
var bounds = new google.maps.LatLngBounds();
var markers = [],
marker;
// building markers from portfolio list
for (i = 0; i < portfolios.length; i++) {
// marker position
var position = new google.maps.LatLng(portfolios[i][1], portfolios[i][2]);
// extending position into list
latlnglist.push(position);
bounds.extend(position);
// special/custom icon for the marker
var image = portfolios[i][3];
// marker options
var markerOptions = {
position: position,
icon: image,
map: map
}
// creating the marker
marker = new google.maps.Marker(markerOptions);
// creating list of markers
markers.push(marker);
// creating the div for the infobox
var boxText = document.createElement("div");
// infobox options
var infoboxOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/examples/tipbox.gif') no-repeat"
,opacity: 0.75
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
// infobox css styles
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: white; padding: 5px; z-index: 9999";
// infobox content
boxText.innerHTML = "<a href='"+ portfolios[i][4] +"'>"+ portfolios[i][0] +"</a><br><br>Test";
// creating the infobox
markers[i].infobox = new InfoBox(infoboxOptions);
// marker action (click)
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
//infobox.setContent(portfolios[i][0]);
markers[i].infobox.close();
markers[i].infobox.open(map, this);
}
})(marker, i));
}
// defining cluster options
var clusterOptions = {
gridSize: 50,
maxZoom: 15
}
// creating the cluster object
var markerCluster = new MarkerClusterer(map, markers, clusterOptions);
var bounds = new google.maps.LatLngBounds();
for (var i = 0, len = latlnglist.length; i < len; i++) {
bounds.extend(latlnglist[i]);
}
map.fitBounds(bounds);
return markers;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
答案 0 :(得分：5)
不确定这有多大帮助，但我的解决方案是只使用一个infowindow。例如，我用于单击地图标记的侦听器是：
google.maps.event.addListener(marker999, "click", function() {
infowindow.close();
infowindow.setContent('contenthere');
infowindow.open(map, marker999);
});
上面的代码是针对我显示的每个标记编写的（具有唯一标记ID和该标记的特定信息窗口内容）。信息框应该可以同样工作。
答案 1 :(得分：0)
我用这个替换了标记动作（点击）部分：
// marker action (click)
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
for ( h = 0; h < markers.length; h++ ) {
markers[h].infobox.close();
}
markers[i].infobox.open(map, this);
}
})(marker, i));
从这里启发：google maps api infobox plugin and multiple markers（几乎相同的代码，在我的案例中删除了一些不必要的行）。
更新了jsfiddle上的工作示例：http://jsfiddle.net/henrichro/mqrrA/
答案 2 :(得分：0)
这可能是一个迟到的答案，但我通过触发自定义事件并在我的盒子上添加一个监听器来解决这个问题。工作得很好。
// just before you open your infobox
marker.addListener('click', function () {
google.maps.event.trigger(map, "closeAllInfoboxes");
infobox.open(marker.get('map'), marker);
});
//Add this event listener to your infobox
google.maps.event.addListener(map, 'closeAllInfoboxes', function () {
infobox.close();
});`