Javascript Google Maps API v3：单击DOM元素时关闭信息窗口

我第一次在谷歌地图上玩，所以我看了一个不错的CSS技巧教程：我喜欢使用jQuery而不是纯JS，本教程提供了一种很好的方法，可以单击列表中的某个位置，在地图中显示标记

我喜欢这种方式，但我需要在标记中添加信息窗口。我确实这样做了，但是当我点击列表上的一个地方，地图就会移动，信息窗口就会一直打开！我想这是因为我需要将infowindow.close（）附加到单击“#li”的事件上

这是我在document.ready上运行的代码：

  $(function() {

                  var chicago = new google.maps.LatLng(41.924832, -87.697456),
                      pointToMoveTo, 
                      first = true,
                      curMarker = new google.maps.Marker({}),
                      $el;

                  var myOptions = {
                      zoom: 10,
                      center: chicago,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                    };

                  var map = new google.maps.Map($("#map_canvas")[0], myOptions);

                  $("#locations li").click(function() {

                    $el = $(this);

                    if (!$el.hasClass("hover")) {

                      $("#locations li").removeClass("hover");
                      $el.addClass("hover");

                      if (!first) { 

                        // Clear current marker
                        curMarker.setMap(); 

                        // Set zoom back to Chicago level
                        // map.setZoom(10);
                      }

                      // Move (pan) map to new location
                      function move(){
                        pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long"));
                        map.panTo(pointToMoveTo);

                      }

                      move();

                      // Add new marker
                      curMarker = new google.maps.Marker({
                          position: pointToMoveTo,
                          map: map
                      });


                      // Infowindow: contenido
                        var contentString = '<p>'+$el.find("h3").html()+'</p>';
                        contentString += 'hola' ;


                        var infowindow = new google.maps.InfoWindow(
                         { 
                           size: new google.maps.Size(150,50),
                           content: contentString
                         });


                        // On click, zoom map
                        google.maps.event.addListener(curMarker, 'click', function() {
                           //map.setZoom(14);

                           infowindow.open(map,curMarker);

                        });

$（函数（）{
var chicago=new google.maps.LatLng（41.924832，-87.697456），
否决权，
第一个=正确，
curMarker=new google.maps.Marker（{}），
$el；
变量myOptions={
缩放：10，
中心：芝加哥，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（$（“#map_canvas”）[0]，myOptions）；
$（“#位置li”）。单击（函数（）{
$el=$（此项）；
if（！$el.hasClass（“悬停”））{
$（“#位置li”）.removeClass（“悬停”）；
$el.addClass（“悬停”）；
如果（！first）{
//清除当前标记
curMarker.setMap（）；
//将缩放设置回芝加哥级别
//map.setZoom（10）；
}
//将（平移）地图移动到新位置
函数move（）{
pointtomovoint=new google.maps.LatLng（$el.attr（“data geo lat”），$el.attr（“data geo long”）；
panTo地图（点到否决）；
}
move（）；
//添加新标记
curMarker=new google.maps.Marker({
立场：反对，
地图：地图
});
//信息窗口：contenido
var contentString=''+$el.find（“h3”）.html（）+'
'；
contentString+='hola'；
var infowindow=new google.maps.infowindow(
{ 
尺寸：新谷歌地图尺寸（150,50），
内容：contentString
});
//单击，缩放地图
google.maps.event.addListener（curMarker，'click'，function（）{
//map.setZoom（14）；
信息窗口。打开（地图、标记）；
});

看起来您正在为每个标记创建一个新的

信息窗口。

如果您一次只想显示一个信息窗口（就像谷歌地图上的行为一样），则只需创建一个信息窗口，您可以在地图事件（如用户单击）时将其重新分配到不同的位置或标记

因此，您可能只需要在初始化映射后创建一个

InfoWindow

对象，然后按如下方式处理

单击事件处理程序：

google.maps.event.addListener(curMarker, 'click', function() {
   infowindow.setContent(contentString);
   infowindow.open(map, curMarker);
});

然后，单击新标记时，
InfoWindow
应自动关闭，而无需调用
close（）
method.
很好的提示！效果非常好！感谢Daniel的帮助！我大约每年使用一次Google Maps API，但每年我都忘了这是处理只显示一个
InfoWindow
的方法。谢谢！）