Javascript 谷歌地图API V3:打开新信息框时关闭所有信息框
我正在使用GoogleMapsAPIv3,我正在尝试设置它,以便在任何给定的时间只打开一个信息框Javascript 谷歌地图API V3:打开新信息框时关闭所有信息框,javascript,google-maps,google-maps-api-3,infowindow,infobox,Javascript,Google Maps,Google Maps Api 3,Infowindow,Infobox,我正在使用GoogleMapsAPIv3,我正在尝试设置它,以便在任何给定的时间只打开一个信息框 for (i = 0; i < data.length; i++) { var item = data[i]; var myLatlng = new google.maps.LatLng(item.lat, item.longs); var contentString
for (i = 0; i < data.length; i++) {
var item = data[i];
var myLatlng = new google.maps.LatLng(item.lat, item.longs);
var contentString = item.name;
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: item.name,
icon: item.type + ".png"
}); // end add new marker
AddInfoBox(marker, contentString); //function call
} //end for loop
function AddInfoBox(myMarker, content)
{
google.maps.event.addListener(myMarker,'click',function() {
ib.setContent(content); //not sure about this statement
ib.open(map, this);
}
});
}
我已经看到了,但我不知道如何修改它们以使其工作。我隐约知道它需要绑定到一个
google.maps.event.addListener(map,'click',function() {
});
for (i = 0; i < data.length; i++) {
var item = data[i];
var myLatlng = new google.maps.LatLng(item.lat, item.longs);
var contentString = item.name;
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: item.name,
icon: item.type + ".png"
}); // end add new marker
AddInfoBox(marker, contentString); //function call
} //end for loop
function AddInfoBox(myMarker, content)
{
google.maps.event.addListener(myMarker,'click',function() {
ib.setContent(content); //not sure about this statement
ib.open(map, this);
}
});
}
但这几乎是我能理解的范围
for (i = 0; i < data.length; i++) {
var item = data[i];
var myLatlng = new google.maps.LatLng(item.lat, item.longs);
var contentString = item.name;
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: item.name,
icon: item.type + ".png"
}); // end add new marker
AddInfoBox(marker, contentString); //function call
} //end for loop
function AddInfoBox(myMarker, content)
{
google.maps.event.addListener(myMarker,'click',function() {
ib.setContent(content); //not sure about this statement
ib.open(map, this);
}
});
}
这是我的密码:
var boxList =[]
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(35.542284,-76.856),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
$(document).ready(function(){
$.getJSON('test.json', function(data) {
for (i = 0; i < data.length; i++) {
var item = data[i];
var myLatlng = new google.maps.LatLng(item.lat, item.longs);
var contentString = item.name;
// accidentally left this extraneous code in here...
// var infowindow = new google.maps.InfoWindow({
// content: item.name
// });
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: item.name,
icon: item.type + ".png"
}); // end add new marker
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black;";
boxText.innerHTML = item.name;
var myOptions = {
content: boxText,
boxStyle: {
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "12px 4px 2px 2px",
};
var ib = new InfoBox(myOptions);
boxList.push(ib);
google.maps.event.addListener(marker,'click',
(function(marker, i) {
return function() {
boxList[i].open(map, this);
}
})(marker, i));
} //end for loop
}) // end getJSON
}); // end jQuery
} // end initialize
for (i = 0; i < data.length; i++) {
var item = data[i];
var myLatlng = new google.maps.LatLng(item.lat, item.longs);
var contentString = item.name;
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: item.name,
icon: item.type + ".png"
}); // end add new marker
AddInfoBox(marker, contentString); //function call
} //end for loop
function AddInfoBox(myMarker, content)
{
google.maps.event.addListener(myMarker,'click',function() {
ib.setContent(content); //not sure about this statement
ib.open(map, this);
}
});
}
var-boxList=[]
函数初始化(){
变量映射选项={
中心:新google.maps.LatLng(35.542284,-76.856),
缩放:11,
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map(document.getElementById(“map_canvas”),
地图选项);
$(文档).ready(函数(){
$.getJSON('test.json',函数(数据){
对于(i=0;i
编辑:我应该提到的是,我是在InfoWindows上实现这一点的,但我需要能够对它们进行设计,使其与网站的特定外观和感觉相匹配,这是我甚至一开始就用头撞Infobox的唯一原因
for (i = 0; i < data.length; i++) {
var item = data[i];
var myLatlng = new google.maps.LatLng(item.lat, item.longs);
var contentString = item.name;
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: item.name,
icon: item.type + ".png"
}); // end add new marker
AddInfoBox(marker, contentString); //function call
} //end for loop
function AddInfoBox(myMarker, content)
{
google.maps.event.addListener(myMarker,'click',function() {
ib.setContent(content); //not sure about this statement
ib.open(map, this);
}
});
}
我真的很感激任何指向正确方向的指点!提前谢谢 使用,看,插件它很容易使用。我相信例子就是你们想要的。它显示了如何在多个标记之间共享单个信息窗口。您在for循环中的编码是罪魁祸首。在循环中,您每次都创建一个新的信息框,因此您只剩下带有每个标记的新信息框
for (i = 0; i < data.length; i++) {
var item = data[i];
var myLatlng = new google.maps.LatLng(item.lat, item.longs);
var contentString = item.name;
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: item.name,
icon: item.type + ".png"
}); // end add new marker
AddInfoBox(marker, contentString); //function call
} //end for loop
function AddInfoBox(myMarker, content)
{
google.maps.event.addListener(myMarker,'click',function() {
ib.setContent(content); //not sure about this statement
ib.open(map, this);
}
});
}
此代码是每次在循环中创建新信息框的代码:
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black;";
boxText.innerHTML = item.name;
var myOptions = {
content: boxText,
boxStyle: {
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "12px 4px 2px 2px",
};
var ib = new InfoBox(myOptions);
for (i = 0; i < data.length; i++) {
var item = data[i];
var myLatlng = new google.maps.LatLng(item.lat, item.longs);
var contentString = item.name;
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: item.name,
icon: item.type + ".png"
}); // end add new marker
AddInfoBox(marker, contentString); //function call
} //end for loop
function AddInfoBox(myMarker, content)
{
google.maps.event.addListener(myMarker,'click',function() {
ib.setContent(content); //not sure about this statement
ib.open(map, this);
}
});
}
因此,要获得InfoBox的单个实例,请在循环之前编写上述代码,以便只初始化InfoBox一次
for (i = 0; i < data.length; i++) {
var item = data[i];
var myLatlng = new google.maps.LatLng(item.lat, item.longs);
var contentString = item.name;
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: item.name,
icon: item.type + ".png"
}); // end add new marker
AddInfoBox(marker, contentString); //function call
} //end for loop
function AddInfoBox(myMarker, content)
{
google.maps.event.addListener(myMarker,'click',function() {
ib.setContent(content); //not sure about this statement
ib.open(map, this);
}
});
}
因为在上述代码中boxText.innerHTML是动态的,所以在AddListener函数中设置此内容
for (i = 0; i < data.length; i++) {
var item = data[i];
var myLatlng = new google.maps.LatLng(item.lat, item.longs);
var contentString = item.name;
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: item.name,
icon: item.type + ".png"
}); // end add new marker
AddInfoBox(marker, contentString); //function call
} //end for loop
function AddInfoBox(myMarker, content)
{
google.maps.event.addListener(myMarker,'click',function() {
ib.setContent(content); //not sure about this statement
ib.open(map, this);
}
});
}
因此,最后的守则应该是—
for (i = 0; i < data.length; i++) {
var item = data[i];
var myLatlng = new google.maps.LatLng(item.lat, item.longs);
var contentString = item.name;
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: item.name,
icon: item.type + ".png"
}); // end add new marker
AddInfoBox(marker, contentString); //function call
} //end for loop
function AddInfoBox(myMarker, content)
{
google.maps.event.addListener(myMarker,'click',function() {
ib.setContent(content); //not sure about this statement
ib.open(map, this);
}
});
}
for(i=0;i
在创建信息框时,为什么要创建信息窗口?哦,好的,这是该代码第一次迭代时遗留下来的问题。它实际上没有做任何事情,我会在OP中对其进行注释。不幸的是,该示例使用了InfoWindow,它基本上无法设置样式。使用InfoWindows我得到了我需要的东西,但是infoBox的文档记录得不太好。它们基本上是一样的,你只需要稍微不同地使用infoBox.setContent()。这里是使用infoBox的同一个例子-谢谢你的提示,但我认为不可能用这个插件来设置标记工具提示的样式,这是我开始使用infoBox而不是InfoWindows的唯一原因。太棒了,这肯定让我走上了我需要的正确道路。我必须移动一些东西才能使闭包正常工作,但这里是最后一个工作示例:。非常感谢你!