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

【问题标题】：Google Maps API Multiple Markers with Infowindows - click events conflicting带有 Infowindows 的 Google Maps API 多个标记 - 单击事件冲突
【发布时间】：2015-05-02 21:29:00
【问题描述】：

我正在尝试制作一个包含多个标记的地图，每个标记都有一个信息窗口。到目前为止没有什么特别的。

所有信息窗口都应在加载时打开。没问题。

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

在自己的标记上
在其信息窗口中的 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>

这是link to the jsfiddle

似乎点击事件发生冲突，但目前我不知道如何更改。有任何想法吗？谢谢。

This post 没有解决我的问题（如果我错了，请纠正我）。其中的信息窗口行为如下：如果您通过单击其标记打开一个新信息窗口，则另一个标记的已打开信息窗口将关闭。那不是我想要的。 只有点击自己的标记才能关闭信息窗口，而不是点击另一个标记。

【问题讨论】：

标签： javascript google-maps google-maps-api-3 google-maps-markers infowindow

【解决方案1】：

post to which you link 确实包含解决方案：“函数闭包”。您只需扩展它以包含每个标记的信息窗口，因为每个标记都有一个唯一的信息窗口，而不是所有标记之间共享的全局信息窗口。

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

working fiddle

代码sn-p：

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>

【讨论】：

非常感谢。是的，我已经尝试过关闭的东西，但似乎我错过了一些东西。 ;）奇迹般有效。 :) jsfiddle.net/adsim/16Len8sh/3

【解决方案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);
    });

【讨论】：

你能在你的答案中添加描述吗？澄清会有很大帮助。
这将帮助您同时弹出关闭和打开谷歌地图中的标记点击。