6

当单击特定标记并打开一个窗口时，我有以下代码来打开一个信息窗口。有谁知道单击另一个信息窗口时如何关闭上一个信息窗口？

   google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map1, marker);
        });
4

7 回答 7

15

只要确保只infoWindow在全局范围内创建 ONE，如下所示：

infoWindow = new google.maps.InfoWindow; //static infoWindow for all your markers
google.maps.event.addDomListener(window, 'load', function() {
   //create your markers here
   google.maps.event.addListener(marker, 'click', function() {
               infoWindow.open(map1, marker); //take care with case-sensitiveness
          });
});

更新：

  • 修复邓肯发现的区分大小写的问题。
  • 说明标记单击处理程序必须在标记创建后连接，两者都在页面加载事件内。
于 2012-09-27T12:39:36.430 回答
8

在您的 JS 文件中创建一个全局变量，将其命名为 lastOpenedInfoWindow 或任何您想要的名称，然后在打开新信息窗口之前将其关闭，将“lastOpenedInfoWindow”分配给当前打开的窗口等等

google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
        return function() {
            closeLastOpenedInfoWindow();
            infowindow.setContent(content);
            infowindow.open(map, marker);
            lastOpenedInfoWindow = infowindow;
        };
    })(marker, makrerdata[i], infowindow));
}


function closeLastOpenedInfoWindow() {
    if (lastOpenedInfoWindow) {
        lastOpenedInfoWindow.close();
    }
}
于 2016-01-09T17:21:51.490 回答
2

确保您拥有一个 InfoWindow 实例 - 新的 google.maps.InfoWindow。因此，每次单击标记时，只有一个实例在您的初始化方法中声明或全局声明的 InfoWindow 中声明。

var infoWindow = new google.maps.InfoWindow
确保此 infoWindow 仅实例化一次。否则，每次单击标记时都会打开多个窗口。

marker.addListener('click', function () {                                
    infoWindow.setContent(infowincontent);
    infoWindow.open(clntLocMap, marker);
});
于 2017-05-10T14:24:10.453 回答
1

infowindow.close()将关闭一个打开的信息窗口。这取决于您如何创建信息窗口 - 您是否只有一个信息窗口变量来处理所有信息，或者您是否为每个标记创建多个信息窗口对象？在这个阶段如果没有看到更多代码，很难更具体。

于 2012-09-27T12:36:53.973 回答
0

我也遇到了这个问题，我是这样做的：

function initMap() {
//---------------------map
var options = {
    zoom: 12,
    center: {
        lat: 43.5963020324707,
        lng: 1.4221688508987427
    }
}
var map = new google.maps.Map(document.getElementById('map'), options);    
//--------------- Adresses
let addresses = [
    "23 Quai Lucien Lombard",
    "18 Place Laganne",
    "266 Avenue de Fronton",
    "3 Impasse du Professeur Nougayrol",
    "1 Allées Charles de Fitte",
    "5 Avenue de Casselardit",
    "84 Chemin des Argoulets"
];

// ---------------- globales
let markers = []
let infowindowArray = []

// ---------------- Adresses Géocoder
geocodeAdresses(addresses)
    .then(res=>{

        geocodeAdressesArray = res;         
        return geocodeAdressesArray
    })
    .then(geocodeAdressesArray=>{
    // --------------create markers
        for (let i = 0; i < geocodeAdressesArray.length; i++){  

            let marker = new google.maps.Marker({ 
                'id': geocodeAdressesArray[i].id,
                'adresse': geocodeAdressesArray[i].adresse,
                'position':{
                    'lat':geocodeAdressesArray[i].lat,
                    'lng':geocodeAdressesArray[i].lng
                }
            });
            markers.push(marker)// push globale             
            marker.setMap(map)
    // ---------- create infowindows

            let infowindow = new google.maps.InfoWindow({
                'position' : marker.position,                
                'content': marker.adresse,
            });
            infowindowArray.push(infowindow) // push globale
        }
    // ---------------close infowindows on clic 
        for (let i = 0; i < markers.length; i++) {
            let marker = markers[i];

            marker.addListener( 'click', ()=>{                  

                for (let j = 0; j < infowindowArray.length; j++) { 
                    let infowindow = infowindowArray[j];
                    infowindow.close(map, marker)
                }
                let currentInfowindows = infowindowArray[i]
                currentInfowindows.open(map)               
            })
        }
    })

}

对于我的 geocodeAdresses（地址），这是我从 google geocode API 创建的一个函数。

我希望它会有所帮助

于 2020-02-06T08:37:22.683 回答
0

marker如果您对“this”有任何问题（在我的情况下，我使用的是 Vue.js），您可以直接使用带箭头函数作为回调。请参阅文档。

就我而言，我有（确保创建一个标记、内容并让 this.mapsInfoWindow 全局实例化，顺便说一句，不需要设置它的内容）：

...
marker.addListener("click", () => {
    if (this.mapsInfoWindow) {
        this.mapsInfoWindow.close();
    }
    this.mapsInfoWindow.setContent(content);
    this.mapsInfoWindow.open(this.map, marker);
});
于 2021-02-26T10:21:28.927 回答
-2

为了在单击另一个信息窗口时关闭前一个信息窗口，您需要确保以下代码在函数 initialize() 循环中。

infoWindow = 新的 google.maps.InfoWindow;

于 2013-03-02T17:08:14.047 回答