谷歌地图:infowindow没有关闭

时间:2012-10-18 11:14:39

标签: google-maps-api-3 infowindow

当我点击另一个标记时,我的infowindows没有自动关闭.. 这里是代码:http://pastebin.com/PvCt2z7W 这是带有infowindows的标记的代码

 for (var n = 0 ; n <listFavourite.length ; n++)
                    //var favouriteObject =listFavourite[n];
                       addMarker(listFavourite[n]);
                   }           
                   function addMarker(data) {
                       var marker = new google.maps.Marker({
                           position: new google.maps.LatLng(data.lattitude, data.longitude),
                           map: map,
                           title: data.address
                       });

                       var contentString = '<div id="content">'+
                           '<div id="siteNotice">'+
                           '</div>'+
                           '<h2 id="firstHeading" class="firstHeading">'+data.name+'</h2>'+
                           '<div id="bodyContent">'+
                           '<p>'+data.address+'</p>'+
                           '<p></p>'+
                           '<p>Do You Want to change search location</p>'+
                           '<input name="yes" id="yes" type="button" class="btn-common" value="Yes"/>'+
                           '</div>'+
                           '</div>';                                                   
                       var infowindow = new google.maps.InfoWindow({
                       maxWidth: 10,
                       });              
                       google.maps.event.addListener(marker, "click", function() {                     
                           infowindow.setContent(contentString);
                           infowindow.open(map, marker);                       
                       });     
                   };

我在这里尝试了所有的答案,但无法正常工作 任何建议或帮助将不胜感激

2 个答案:

答案 0 :(得分:2)

不是为每个标记创建一个infowindow,而是拥有一个全局infowindow变量。然后,您在标记点击处理程序中执行的操作每次都会更新标记的内容。但是,您的代码将需要使用闭包来完成,否则您将获得每个标记具有最后一个标记的内容。

var infowindow = new google.maps.InfoWindow({
   maxWidth: 10
});

var arrMarkers = [];

function addMarker(data) {
   var marker = new google.maps.Marker({
       position: new google.maps.LatLng(data.lattitude, data.longitude),
       map: map,
       title: data.address
   });

    arrMarkers.push(marker);

   var contentString = '<div id="content">'+
       '<div id="siteNotice">'+
       '</div>'+
       '<h2 id="firstHeading" class="firstHeading">'+data.name+'</h2>'+
       '<div id="bodyContent">'+
       '<p>'+data.address+'</p>'+
       '<p></p>'+
       '<p>Do You Want to change search location</p>'+
       '<input name="yes" id="yes" type="button" class="btn-common" value="Yes"/>'+
       '</div>'+
       '</div>';                                                   


    // add an event listener for this marker
    bindInfoWindow(marker, map, infowindow, contentString);   
}


function bindInfoWindow(marker, map, infowindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
        infowindow.setContent(html); 
        infowindow.open(map, marker); 
    }); 
}

function clickLink(ID) {
    google.maps.event.trigger(arrMarkers[ID], 'click');
}

您的侧边栏链接的HTML可能如下所示:

<a href="javascript:clickLink(0); return false;">Link 1</a><br>
<a href="javascript:clickLink(1); return false;">Link 2</a><br>
...

答案 1 :(得分:0)

使用函数闭包的另一个选项(基本上涉及使用createMarker函数)是将infowindow的内容保存在标记的属性中。单个信息窗仍然是最简单的。你没有在你的pastebin中提供足够的上下文来为你提供一个可以做到这一点的工作示例。

这是一个使用函数闭包将infowindow内容与标记相关联的示例,并且有一个infowindow(从Mike Williams的v2教程翻译而来)。

http://www.geocodezip.com/v3_MW_example_map3.html

Mike Williams' description of function closure

这是一个不使用函数闭包的示例(它将infowindow内容存储在标记对象的属性中):

http://www.geocodezip.com/v3_MW_example_map3_noclosure.html