Javascript 使用Infobox的多个标记Google Maps API V3

我尝试在地图上放置多个标记，并且能够单独切换它们，以便一次只显示一个标记。在此之前，我能够完美地加载和切换单个信息框。我试图实现的最终目标是一次只打开一个信息框，并且能够访问单个标记信息框。目前，我有多个标记，但信息框不会与该功能切换

代码：

var myCenter=newgoogle.maps.LatLng（30.43，-84.285）//塔拉哈斯
var myHouse=new google.maps.LatLng（30.438329，-84.29116599998）//我家
//以塔拉哈西为中心初始化地图
函数初始化（）
{
var mapProp={
中心：迈森特，
缩放：14，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“googleMap”），mapProp）；
var marker=新数组（）；
var ib=新数组（）；
对于（var i=0；i<2；i++）{//开始循环-----------------------------
//标记（这将创建标记，无需进一步操作）
marker[i]=新的google.maps.marker({
位置：myHouse，//标记位置
map:map，//此标记所在的映射默认为当前
标题：“更多信息”，//光标悬停在标记上时显示文本
可拖动：错误，
图标：“images/sm1beermug.png”
});
var-boxText=document.createElement（“div”）；
boxText.style.cssText=“边框：3px实心#2d2d；”；
boxText.innerHTML=“泰勒之家””；
//HTML5不支持字体属性，请在以后的版本中使用css
变量myOptions={
内容：boxText，
disableAutoPan:错，
最大宽度：0，
pixelOffset:new google.maps.Size（-251，0），//X轴的大小应为方框宽度的一半
zIndex:null，
boxStyle:{
背景：“url（'tipbox.gif'）不重复”，
不透明度：.94，
宽度：“502px”
},
closeBoxMargin：“2px2px2px2px2px”，
closeBoxURL:“images/close.png”，
infoBoxClearance:new google.maps.Size（10,10），
伊希登：错，
窗格：“浮动窗格”，
enableEventPropagation:false
};
ib[i]=新信息框（myOptions）；
ib[i].open（map，marker[i]）；
ib[i].hide（）；
google.maps.event.addListener（标记[i]，'click'，函数（）{
if（ib[i].getVisible（））{
ib[i].close（）；
ib[i].open（map，marker[i]）；
ib[i].hide（）；
}
否则{
ib[i].show（）；
}
});
myHouse=new google.maps.LatLng（30.41329，-84.293165999998）；
}//结束循环-------------------
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

试试这段代码

google.maps.event.addListener(marker[i], 'click', function() {
        if(ib[i].getVisible()){
           ib[i].setVisible(false);     // hide() and show() are deprecated.
        }
        else{
          ib[i].setVisible(true);       // hide() and show() are deprecated.
        }
    });

我的实现…
*初始化变量

var map; // Google map instance
var mapMarkers = Array();
var mapInfoWindows = Array();

我使用以下函数添加和删除标记

function addMarker(marker, infoWindow) {
    // Update markers and infowindows
    mapMarkers.push(marker);
    mapInfoWindows.push(infoWindow);

    marker.setMap(map);
    google.maps.event.addListener(marker, 'click', function () {
        // Open the window before closing to remove flicker
        infoWindow.open(map, marker);
        for (i in mapInfoWindows) {
            if (mapInfoWindows[i] !== infoWindow) {
                mapInfoWindows[i].close();
            }
        }
    });
}

我的应用程序要求我删除所有标记以进行地图刷新

function removeMarkers() {
    for (i in mapInfoWindows) {
        mapInfoWindows[i].close();
    }
    for (m in mapMarkers) {
        google.maps.event.clearInstanceListeners(mapMarkers[m]);
        mapMarkers[m].setMap(null);
    }
    mapInfoWindows.length = 0;
    mapMarkers.length = 0;
}

---

使用相同的信息框，只需在每次单击时更改内容：

var markers = [];
var map = new google.maps.Map(document.getElementById(divId), mapOptions); 
var infoBox = new InfoBox(getInfoBoxOptions());

    $.each(data, function (i, obj)
    {
        var pos = new google.maps.LatLng(obj.Lat, obj.Lng);
        var marker = _getMarker(map, obj.Name, pos);
        marker.text = '<div> Different content for each marker </div>';
        markers.push(marker);

        google.maps.event.addListener(marker, 'click', function ()
        {
            infoBox.setContent(this.text);
            infoBox.open(map, this);
            map.panTo(this.getPosition());
        });
    });

var标记=[]；
var map=new google.maps.map（document.getElementById（divId），mapOptions）；
var infoBox=newinfobox（getInfoBoxOptions（））；
$。每个（数据、功能（i、obj）
{
var pos=新的google.maps.LatLng（obj.Lat，obj.Lng）；
变量标记=_getMarker（映射、对象名称、位置）；
marker.text='每个标记的不同内容'；
标记器。推（标记器）；
google.maps.event.addListener（标记，'click'，函数（）
{
infoBox.setContent（this.text）；
打开（地图，这个）；
map.panTo（this.getPosition（））；
});
});

通过删除ib[i].hide（）；打开后，我可以确认箱子的装载情况，只是不会切换。可能会重复

var markers = [];
var map = new google.maps.Map(document.getElementById(divId), mapOptions); 
var infoBox = new InfoBox(getInfoBoxOptions());

    $.each(data, function (i, obj)
    {
        var pos = new google.maps.LatLng(obj.Lat, obj.Lng);
        var marker = _getMarker(map, obj.Name, pos);
        marker.text = '<div> Different content for each marker </div>';
        markers.push(marker);

        google.maps.event.addListener(marker, 'click', function ()
        {
            infoBox.setContent(this.text);
            infoBox.open(map, this);
            map.panTo(this.getPosition());
        });
    });