带有Infowindows的Google Maps API多个标记-单击事件冲突

Question

我正在尝试制作一个带有多个标记的地图，每个标记都带有一个信息窗口。 到目前为止还算不上什么。

所有信息窗口均应在打开时打开。 没问题。

如果我单击，每个信息窗口都应该关闭

靠自己的标记
在其信息窗口中的X上。

后者也没问题。

但是，如果我单击标记，它的行为将不正常。

页面已加载。 信息窗口打开。 现在，我单击标记1，它会关闭标记2的信息窗口。如果再次单击标记1，则会在标记1上打开另一个信息窗口。标记1上的“初始”信息窗口只能用信息窗口中的X来关闭。

如果我通过X关闭所有信息窗口，则可以通过其标记打开和关闭每个信息窗口。 但是：打开的信息窗口将通过单击其他标记而关闭，这不是我想要的。 只需单击自己的标记，即可打开和关闭信息窗口。

这是我的代码：

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Circles</title> <style> html, body { height: 100%; margin: 0px; padding: 0px } #map-canvas { height: 500px; width:800px; margin: 0px; padding: 0px } </style> <script> function initialize() { var infos = []; var locations = [ ['Marker 1', 54.08655, 13.39234, 2], ['Marker 2', 53.56783, 13.27793, 1] ]; var map = new google.maps.Map(document.getElementById('map-canvas'), { mapTypeId: google.maps.MapTypeId.ROADMAP, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL } }); var bounds = new google.maps.LatLngBounds(); for (i = 0; i < locations.length; i++) { var marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map, content: locations[i][0] }); bounds.extend(marker.position); var openedInfoWindow = null; var infowindow = new google.maps.InfoWindow(); google.maps.event.addListener(marker, 'click', (function() { console.log('Klick! Marker='+this.content); if(openedInfoWindow != null){ openedInfoWindow.close(); openedInfoWindow = null; }else{ infowindow.setContent(this.content); infowindow.open(map, this); openedInfoWindow = infowindow; google.maps.event.addListener(infowindow, 'closeclick', function() { openedInfoWindow = null; }); } })); google.maps.event.trigger(marker, 'click'); } map.fitBounds(bounds); var listener = google.maps.event.addListener(map, "idle", function () { map.setZoom(8); google.maps.event.removeListener(listener); }); } function loadScript() { var script = document.createElement('script'); script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize'; document.body.appendChild(script); } window.onload = loadScript; </script> </head> <body> <div id="map-canvas"></div> </body> </html>

这是jsfiddle的链接

看来点击事件是有冲突的，但此刻我不知道该如何更改。 有任何想法吗？ 谢谢。

这篇文章没有解决我的问题（如果我错了，请纠正我）。 其中的信息窗口的行为如下：如果通过单击其标记打开新的信息窗口，则已打开的另一个标记的信息窗口将关闭。 那不是我想要的 仅单击其自己的标记应关闭信息窗口，而不单击其他标记 。

Answer 1

您链接到的帖子确实包含解决方案：“函数关闭”。 您只需要扩展它以包括每个标记的信息窗口，因为每个标记都有唯一的信息窗口，而不是在所有标记之间共享全局信息窗口。

for (i = 0; i < locations.length; i++) {
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        content: locations[i][0]
    });
    var infowindow = new google.maps.InfoWindow();
    google.maps.event.addListener(marker, 'click', (function (marker, i, infowindow) {
        return function () {
            console.log('Klick! Marker=' + this.content);
            infowindow.setContent(this.content);
            infowindow.open(map, this);
        };
    })(marker, i, infowindow));
    bounds.extend(marker.position);

    google.maps.event.trigger(marker, 'click');
}

工作小提琴

代码段：

 function initialize() { var infos = []; var locations = [ ['Marker 1', 54.08655, 13.39234, 2], ['Marker 2', 53.56783, 13.27793, 1] ]; var map = new google.maps.Map(document.getElementById('map-canvas'), { mapTypeId: google.maps.MapTypeId.ROADMAP, zoomControl: true, zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL } }); var bounds = new google.maps.LatLngBounds(); for (i = 0; i < locations.length; i++) { var marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map, content: locations[i][0] }); var infowindow = new google.maps.InfoWindow(); google.maps.event.addListener(marker, 'click', (function(marker, i, infowindow) { return function() { console.log('Klick! Marker=' + this.content); infowindow.setContent(this.content); infowindow.open(map, this); }; })(marker, i, infowindow)); bounds.extend(marker.position); google.maps.event.trigger(marker, 'click'); } map.fitBounds(bounds); var listener = google.maps.event.addListenerOnce(map, "idle", function() { map.setZoom(8); }); } function loadScript() { var script = document.createElement('script'); script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize'; document.body.appendChild(script); } window.onload = loadScript;

 html, body { height: 100%; margin: 0px; padding: 0px } #map-canvas { height: 500px; width: 800px; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map-canvas"></div>

Answer 2

function close_popups(){
  for(var i = 0; i<marker.length; i++){
    marker[i]['infowindow'].close();
  }
}
google.maps.event.addListener(newmarker, 'click', function() {
     close_popups(); 
      this['infowindow'].open(map, this);
    });

带有Infowindows的Google Maps API多个标记-单击事件冲突

问题描述

2 个解决方案

解决方案1
6 已采纳 2015-03-02 15:07:41

解决方案2
0 2016-06-18 05:34:33

带有Infowindows的Google Maps API多个标记-单击事件冲突

问题描述

2 个解决方案

解决方案1 6 已采纳 2015-03-02 15:07:41

解决方案2 0 2016-06-18 05:34:33

解决方案1
6 已采纳 2015-03-02 15:07:41

解决方案2
0 2016-06-18 05:34:33