在地图上显示多个标记时，只打开信息框

本文介绍了在地图上显示多个标记时，只打开信息框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个createMarker（）函数，用于在Google地图上放置多个标记。代码如下：
$ b

 function createMarker（point，custid，streetadd，city，state，邮编，地址，电话，网站，公司）
 {
 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 = '标题' >中; 
 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> +网站+< / a>< / TD>< / TR>< TR>< TD class ='availableStyle'>」; 
 markerMarkup = markerMarkup +'< a href =javascript :; onclick =setstyles（'+ custid +'，\''+ streetadd +'\''+'，\''+ city +'\''+'，\''+ state +'\\ '+'，''+'邮编+'''''，''''+地址+''''''，''''+电话号码''''''+' ，\''+网站+'\''+'，\''+ co +'\''+'）;>查看可用样式< / a>'; 
 
 // markerMarkup = markerMarkup +'< input type =buttonvalue =see available stylesonclick =setstyles（'+ custid +'，\''+ streetadd +'\''+' ，\''+ city +'\''+'，\''+ state +'\''+'，\''+ zip +'\''+'，\'' +地址+'\''+'，\''+电话+'\''+'，\''+网站+'\''+'，\''+ co +'\\ \\''+'）/>'; 
 markerMarkup = markerMarkup +< / TD&g t;< / 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 
，窗格：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）; 
}）; 
 
返回标记; 
 
}

我从，并以相同的方式应用代码，但我没有得到想要的结果。

解决方案

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

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

  var ib; 
 
函数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）; 
}）; 
 
 
 
 
 
 $ b 如果你需要每个标记的新信息框，那么你可以存储一个数组。
  var ibs = []; 
 $ b var closeInfoBox = function（）{
 for（var i in ibs）{
 ibs [i] .close（）; 
 
 
 $ b函数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）; 
}）; 
 
} 
  
 
I have a createMarker() function that is used to place multiple markers on the google map. The following is the code:
     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;

    }
I have referred similar question from Google Map V3 - Allow only one infobox to be displayed at a time and applied the code in the same way but I am not getting the desired result.
Google Map V3 - Allow only one infobox to be displayed at a time
 解决方案 
You declare a new infobox every time you create a marker.  So 'ib' refers to the infobox created for that marker and not the others.
You need to set the infobox variable outside the createMarker function scope.  Then inside your event listener, close the old infobox and then create a new one.
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);
    });
}
If you need a new infobox for each marker, then you could store an array of infoboxes.
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);
    });

}
                        
这篇关于在地图上显示多个标记时，只打开信息框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！