Google maps 谷歌地图API信息框-单击一个信息框并关闭其他信息框
我正在使用infobox插件创建具有不同内容的多个标记- 此外,我正在使用markerclusterer插件处理同一区域中的太多标记- 所有标记均正确显示,聚类工作正常 问题。我的问题是,我怎样才能单击一个信息框并关闭其他信息框,如果您选择另一个信息框,它将打开该信息框并关闭其他信息框 这是我当前的代码[更新]:Google maps 谷歌地图API信息框-单击一个信息框并关闭其他信息框,google-maps,markerclusterer,infobox,Google Maps,Markerclusterer,Infobox,我正在使用infobox插件创建具有不同内容的多个标记- 此外,我正在使用markerclusterer插件处理同一区域中的太多标记- 所有标记均正确显示,聚类工作正常 问题。我的问题是,我怎样才能单击一个信息框并关闭其他信息框,如果您选择另一个信息框,它将打开该信息框并关闭其他信息框 这是我当前的代码[更新]: ['', , '', ''], ]; 函数初始化(){ //指向宇宙的中心 var latlng=新的google.maps.latlng(0,0); //设置地图选项 var my
['', , '', ''],
];
函数初始化(){
//指向宇宙的中心
var latlng=新的google.maps.latlng(0,0);
//设置地图选项
var myMapOptions={
缩放:2,
中心:拉特林,
滚轮:错误,
mapTypeId:google.maps.mapTypeId.SATELLITE
};
//创建地图
var map=new google.maps.map(document.getElementById(“googlemap”)、myMapOptions);
//坐标/位置列表
var latlnglist=[]
//边界
var bounds=new google.maps.LatLngBounds();
var标记=[],
标记;
//从公文包列表构建标记
对于(i=0;i<0.length;i++){
//标记位置
var position=new google.maps.LatLng(公文包[i][1],公文包[i][2]);
//将位置扩展到列表中
推拉(位置);
扩展(位置);
//标记的特殊/自定义图标
var image=投资组合[i][3];
//标记选项
变量标记选项={
职位:职位,,
图标:图像,
地图:地图
}
//创建标记
marker=新的google.maps.marker(markerOptions);
//创建标记列表
标记器。推(标记器);
//为信息框创建div
var-boxText=document.createElement(“div”);
//信息盒选项
var infoboxOptions={
内容:boxText
,disableAutoPan:false
,最大宽度:0
,pixelOffset:new google.maps.Size(-140,0)
,zIndex:null
,箱式:{
背景:“url('http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/examples/tipbox.gif“)不要重复”
,不透明度:0.75
,宽度:“280px”
}
,closeBoxMargin:“10px 2px 2px 2px”
,closeBoxURL:“http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance:newgoogle.maps.Size(1,1)
,isHidden:错
,窗格:“浮动窗格”
,enableEventPropagation:false
};
//信息盒css样式
boxText.style.cssText=“边框:1px纯黑色;页边距顶部:8px;背景:白色;填充:5px;z索引:9999”;
//信息盒内容
boxText.innerHTML=“
测试”;
//创建信息框
标记[i].infobox=newinfobox(infoboxOptions);
//标记操作(单击)
google.maps.event.addListener(标记,'click',(函数(标记,i){
返回函数(){
//infobox.setContent(公文包[i][0]);
标记[i].infobox.close();
markers[i].infobox.open(map,this);
}
})(marker,i));
}
//定义集群选项
变量clusterOptions={
网格大小:50,
最大缩放:15
}
//创建集群对象
var markerCluster=新的MarkerClusterer(地图、标记、聚类选项);
var bounds=new google.maps.LatLngBounds();
for(变量i=0,len=latlnglist.length;i
不确定这有多大帮助,但我的解决方案是只使用一个信息窗口。例如,我用于单击地图标记的侦听器是:
google.maps.event.addListener(marker999, "click", function() {
infowindow.close();
infowindow.setContent('contenthere');
infowindow.open(map, marker999);
});
上面的代码是为我显示的每个标记编写的(带有唯一的标记ID和该标记的特定infowindow内容)。Infobox应该也能起到类似的作用
工作示例:不确定这有多大帮助,但我的解决方案是只使用一个信息窗口。例如,我用于单击地图标记的侦听器是:
google.maps.event.addListener(marker999, "click", function() {
infowindow.close();
infowindow.setContent('contenthere');
infowindow.open(map, marker999);
});
上面的代码是为我显示的每个标记编写的(带有唯一的标记ID和该标记的特定infowindow内容)。Infobox应该也能起到类似的作用
工作示例:我将标记操作(单击)部分替换为以下内容:
// 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.event.addListener(标记,'click',(函数(标记,i){
返回函数(){
对于(h=0;h<0.length;h++){
标记[h].infobox.close();
}
markers[i].infobox.open(map,this);
}
})(marker,i));
灵感来源于此:(几乎相同的代码,删除了我案例中一些不必要的行)
更新了JSFIDLE上的工作示例:我用以下内容替换了标记操作(单击)部分:
// 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.event.addListener(标记,'click',(函数(标记,i){
返回函数(){
对于(h=0;h<0.length;h++){
标记[h].infobox.close();
}
markers[i].infobox.open(map,this);
}
})(marker,i));
灵感来源于此:(几乎相同的代码,删除了我案例中一些不必要的行)
更新了JSFIDLE上的工作示例:这可能是一个迟来的答案,但我通过触发一个自定义事件并在我的框中添加一个侦听器解决了这个问题。对我来说很好
// 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();
});`
这可能是一个迟来的答案,但我通过触发一个自定义事件并在我的框中添加一个侦听器解决了这个问题。对我来说很好
// 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();
});`
非常感谢,但这对我没有帮助。我的地图是在一个稍微不同的模式下构建的-Go4the1非常感谢,但它不是有用的