在同一时间开场仅一个信息框时,会显示在地图上多个标记(Opening only a infobox

2019-08-05 06:45发布

我有一个用来放置多个标记在谷歌地图上的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;

    }  

我从提到类似的问题, 谷歌地图V3 -只允许一次一个要显示的信息框 ,并以同样的方式应用的代码,但我没有得到期望的结果。

谷歌地图V3 -允许在一次只能显示一个信息框

Answer 1:

您声明每次你创建一个标记时间一个新的信息框。 所以,“IB”是指为标志,而不是其他人创建的信息框。

您需要设置createMarker功能范围之外的信息框变量。 那么你的事件侦听器内,关闭旧的信息框,然后创建一个新的。

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);
    });

}


文章来源: Opening only a infobox at a time when multiple markers are displayed on the map