谷歌地图循环标记不会关闭以前的infowindow

时间:2014-02-22 20:37:53

标签: javascript function google-maps

使用循环在Google地图上显示标记,我发现即使我有一个监听器,之前的窗口也不会关闭

这是我的代码(设置为故意将数字限制为50),如果用户设置了位置信息,则显示标记

    function loadGmodule() {

      var map = new google.maps.Map(
        document.getElementById('gmashup'), {
          center: new google.maps.LatLng(20, 0),
          zoom: 1,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      });



      for (var i=0;i<50;i++) {

      u = users[i];

      if (u.lat) {


      marker = new google.maps.Marker({
            position: new google.maps.LatLng(u.lat, u.lang),
            map: map
      });

      infoContent[i] = '<table ><tr><td><img src=\"'+u.avatar+'\" width=\"60\" height=\"75\"></td>';
      infoContent[i] = infoContent[i] + '<td><b><a href=\"index.php?option=com_comprofiler&task=userProfile&user='+u.user_id+'&Itemid=100004\">'+u.firstname+' '+u.middlename+' '+u.lastname+'</a></b><br />'+u.designation + '<br />'+u.company+'<br />'+u.city+'</td>';
      infoContent[i] = infoContent[i] + '</tr></table>';

      var infoWindow = new google.maps.InfoWindow();

      infoWindow.setContent(infoContent[i]);

      addInfoWindowOnEvent(marker, infoWindow, map, 'click');

      }

      }

}

和函数/监听器

function addInfoWindowOnEvent(marker, infoWindow, map, event) {
    google.maps.event.addListener(marker, event, function () {
        infoWindow.close();
        infoWindow.open(map, marker);
    });
}

任何人都可以建议放置infoWindow.close()的最佳位置,以便在点击另一个引脚时先前的窗口会关闭。

提前感谢您的任何帮助

2 个答案:

答案 0 :(得分:0)

即使编辑过的表示重复,也没有在提供的链接中找到它。但是(尽管我认为这是一个黑客攻击,但它会这样做)但这里有一个有效的答案

Google Maps API v3 (one infowindow open at a time)

我将我的功能改为

function addInfoWindowOnEvent(marker, infoWindow, map, event) {
    google.maps.event.addListener(marker, event, function () {
    if($('.gm-style-iw').length) {
         $('.gm-style-iw').parent().remove();
    }
    infoWindow.open(map,marker);
    });
}

现在只有一个窗口保持打开状态

答案 1 :(得分:0)

对于您正在创建新信息窗口的每个标记。如果你想关闭以前的infowindow并且只打开一个infowindow,那么只创建一个infowindow就足够了。它应该是全球性的:

var infoContent = [];
var infoWindow;

function loadGmodule() {
    var map = new google.maps.Map(
    ...
infoWindow = new google.maps.InfoWindow();

//for (var i = 0; i < 50; i++) {
for (var i = 0; i < users.length; i++) {
...

然后向事件监听器提供特定内容:

            ...
            infoContent[i] = infoContent[i] + '</tr></table>';

            //infoWindow = new google.maps.InfoWindow();
            //infoWindow.setContent(infoContent[i]);
            addInfoWindowOnEvent(marker, infoContent[i], map, 'click');
        }
    }
}


function addInfoWindowOnEvent(marker, infoContent, map, event) {
    google.maps.event.addListener(marker, event, function () {
        infoWindow.close();
        infoWindow.setContent(infoContent)
        infoWindow.open(map, marker);
    });
}