当点击另一个标记时关闭信息窗口

Question

我有以下代码，可以在特定的标记被单击时打开信息窗口并打开窗口。有人知道如何在点击另一个标记时关闭先前的信息窗口吗？

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

- user1292656

---

你能展示更多的代码吗？例如，infowindow是在哪里首次创建的？ - duncan

可能是重复的问题：http://stackoverflow.com/questions/5110956/close-other-infowindows-nicely?rq=1 或 https://dev59.com/SmjWa4cB1Zd3GeqPuM16#12567780 - geocodezip

Answer 1

只需确保在全局范围内仅创建一个infoWindow，像这样：

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

更新:

• 修复Duncan发现的大小写敏感问题。
• 说明标记点击处理程序必须在标记创建之后连接，而且要在页面加载事件内部。

- Nelson

---

应该是 infoWindow.open，因为 JavaScript 是区分大小写的。 - duncan

所有的标记都是在页面加载时创建的，这就是为什么它不起作用的原因 :) - user1292656

@user1292656 将所有内容放在页面加载处理程序中，除了 infoWindow 声明，该声明保留在您的 js 文件根目录中。 - Nelson

Answer 2

在你的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();
    }
}

- Baha' Al-Khateib

Answer 3

确保你只有一个InfoWindow实例 - new google.maps.InfoWindow。因此，每次点击标记时，只打开在initialize方法中声明的一个实例或全局声明的InfoWindow。

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

marker.addListener('click', function () {                                
    infoWindow.setContent(infowincontent);
    infoWindow.open(clntLocMap, marker);
});

- Yergalem

Answer 4

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

- duncan

---

是的，我正在使用同一个变量来处理所有内容 :) - user1292656

Google Maps V3无法工作，请指定版本。 - chris_r

Answer 5

如果您在使用Vue.js时遇到任何与“this”有关的问题，可以直接使用带有箭头函数的marker作为回调函数。请参阅文档。

在我的情况下，我已经创建了一个标记、内容，并且全局实例化了this.mapsInfoWindow（确保创建一个标记、内容并且全局实例化this.mapsInfoWindow，顺便说一句，不需要设置其内容）：

...
marker.addListener("click", () => {
    if (this.mapsInfoWindow) {
        this.mapsInfoWindow.close();
    }
    this.mapsInfoWindow.setContent(content);
    this.mapsInfoWindow.open(this.map, marker);
});

- abdelgrib

Answer 6

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

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（地址），这是我从谷歌地理编码API创建的函数。

希望它能有所帮助。

- MimiS

Answer 7

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

infoWindow = new google.maps.InfoWindow;

- Andy Bajka