当地图上显示多个标记时，一次仅打开一个信息框

Question

我有一个 createMarker() 函数，用于在谷歌地图上放置多个标记。以下是代码：

     function createMarker(point,custid,streetadd,city,state,zip,address,phone,website,co) 
    {   
        var infowindowHover,infowindowClick;

        var marker = new google.maps.Marker({                
            position: point,                
            map: map,
            icon: image, 
        });

        var boxClickText = document.createElement("div");            
        boxClickText.className = "infoBackground";

        var markerMarkup = "<div id='infobox'><TABLE class='test'><TR><TD colspan='2'><B class='title'>";
            markerMarkup = markerMarkup + co + "</B></TD></TR><TR><TD colspan='2'>";
            markerMarkup = markerMarkup + streetadd + "</TD></TR><TR><TD colspan='2'>";
            markerMarkup = markerMarkup + city + "," + state + " " + zip + "</TD></TR><TR><TD colspan='2'>";
            markerMarkup = markerMarkup + phone + "</TD></TR><TR><TD colspan='2'>";
            if(website.indexOf("http://")>0) { markerMarkup = markerMarkup +"<a href="; }
            else{  markerMarkup = markerMarkup +"<a href=http://"; }
            markerMarkup = markerMarkup + website + " target=_blank>" + website + "</a></TD></TR><TR><TD class='availableStyle'>";                
            markerMarkup = markerMarkup +'<a href="javascript:;" onclick="setstyles('+ custid +',\'' + streetadd + '\'' + ',\'' + city + '\'' + ',\'' + state + '\'' + ',\'' + zip + '\'' + ',\'' + address + '\''+ ',\'' + phone + '\''+ ',\'' + website + '\''+ ',\'' + co + '\'' + ')";">see available styles</a>';

            //markerMarkup = markerMarkup + '<input type="button" value="see available styles" onclick="setstyles('+ custid +',\'' + streetadd + '\'' + ',\'' + city + '\'' + ',\'' + state + '\'' + ',\'' + zip + '\'' + ',\'' + address + '\''+ ',\'' + phone + '\''+ ',\'' + website + '\''+ ',\'' + co + '\'' + ')" />';
markerMarkup = markerMarkup + "</TD></TR></TABLE></div>";

        boxClickText.innerHTML = markerMarkup;


        var myOptions_click = {
            content: boxClickText
        //,disableAutoPan: true
        ,disableAutoPan: false
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(-140, 0)
        ,zIndex: null
        ,boxStyle: {                 
            //opacity: 0.75
            //,width: "280px"
            margin:"-58px 0px 0px 148px"
            }
        ,closeBoxMargin: "10px 2px 2px 2px"
        ,closeBoxURL: "http://mansi:2525/pc-new/images/mapclosebutton.gif"
        ,infoBoxClearance: new google.maps.Size(1, 1)
        ,isHidden: false
        ,pane: "floatPane"
        ,id: "infoWindowClick"
        ,enableEventPropagation: false
        };

        var ib = new InfoBox();

        google.maps.event.addListener(marker, "click", function (e) {
            ib.close();
            ib.setOptions(myOptions_click);
            ib.open(map, this);
        });

        return marker;

    }  

我从Google Map V3 - Allow only one infobox to be displayed at a time 提到了类似的问题，并以同样的方式应用了代码，但我没有得到想要的结果。

Google Map V3 - Allow only one infobox to be displayed at a time

Answer 1

每次创建标记时都声明一个新信息框。所以 'ib' 指的是为该标记而不是其他标记创建的信息框。

您需要在 createMarker 函数范围之外设置 infobox 变量。然后在您的事件侦听器中，关闭旧信息框，然后创建一个新信息框。

var ib;

function createMarker(<params>) {
     google.maps.event.addListener(marker, "click", function (e) {
        if (typeof ib === 'object') {
            ib.close();
        }
        ib = new Infobox();
        ib.setOptions(myOptions_click);
        ib.open(map, this);
    });
}

如果您需要为每个标记创建一个新的信息框，那么您可以存储一个信息框数组。

var ibs = [];

var closeInfoBox = function() {
    for (var i in ibs) {
        ibs[i].close();
    }
}

function createMarker(<params>) {
    var ibIndex = ibs.push(new Infobox()) - 1,
        ib = ibs[ibIndex];

    google.maps.event.addListener(marker, "click", function (e) {
        closeInfoBox();
        ib.setOptions(myOptions_click);
        ib.open(map, this);
    });

}