javascript - 鼠标悬停，鼠标移出并点击谷歌地图上的相同标记

Question

当我将鼠标悬停在鼠标上时，信息窗口应该会打开并显示“你好”。但是，如果我将光标移到别处，它应该关闭该 InfoWindow。这可以使用下面的代码:

google.maps.event.addListener(marker, 'mouseover', function() {
   infowindow.setContent("Hello");
   infowindow.open(map, marker);
});

google.maps.event.addListener(marker, 'mouseout', function() {        
   infowindow.close();
});

但是如果我单击标记，它应该会打开包含不同内容的信息窗口。这可以使用下面的代码:

google.maps.event.addListener(marker, 'click',function() {        
   infowindow.setContent(mycontent(name,msg));
   infowindow.open(map, marker);          
});

问题: 如果我单击标记，信息窗口将打开并显示我的内容，但一旦光标移动，信息窗口就会因鼠标移出事件而关闭。我们如何防止这种情况发生，以便在单击时 InfoWindow 保持打开状态，直到并且除非有人单击 InfoWindow 上的十字 (X) 标记？

Answer 1

当标记被点击时设置一个标志(我称之为clicked)。检查 mouseover/mouseout 监听器中的标志，如果已设置则不要采取任何操作。单击“X”关闭 InfoWindow 时清除标志(将其设置为 false)。

代码片段:

var infowindow = new google.maps.InfoWindow();
var clicked = false;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map
  });
  google.maps.event.addListener(marker, 'mouseover', function() {
    if (!clicked) {
      infowindow.setContent("Hello");
      infowindow.open(map, marker);
    }
  });

  google.maps.event.addListener(marker, 'mouseout', function() {
    if (!clicked) {
      infowindow.close();
    }
  });

  google.maps.event.addListener(marker, 'click', function() {
    clicked = true;
    infowindow.setContent("mycontent(name,msg)");
    infowindow.open(map, marker);
  });
  google.maps.event.addListener(infowindow,
    'closeclick',
    function() {
      clicked = false;
    })
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>