javascript - 是否可以在某些条件下关闭信息窗口

Question

信息窗口应仅在您将鼠标悬停在标记上时显示。当您将鼠标从标记上移开时，它应该消失。仅当您单击标记时它才应保留。并单击信息窗口的关闭按钮关闭。

Answer 1

您可以尝试使用 google.maps.event.addListener :

JavaScript within the browser is event driven, meaning that JavaScript responds to interactions by generating events, and expects a program to listen to interesting events. There are two types of events:

• User events (such as "click" mouse events) are propagated from the DOM to the Google Maps JavaScript API. These events are separate and distinct from standard DOM events.
• MVC state change notifications reflect changes in Maps JavaScript API objects and are named using a property_changed convention.

Each Maps JavaScript API object exports a number of named events. Programs interested in certain events will register JavaScript event listeners for those events and execute code when those events are received by calling addListener() to register event handlers on the object.

您可以尝试使用此 post 中的代码:

var geocoder;
var map;

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

setMarkers(map,locations);


}
google.maps.event.addDomListener(window, "load", initialize);
var locations = [
  ['Bondi Beach', -33.890542, 151.274856,,, 'Bondi Beach', 4],
  ['Coogee Beach', -33.923036, 151.259052,,,'Coogee Beach', 5],
  ['Cronulla Beach', -34.028249, 151.157507,,,'Cronulla Beach', 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187,,, 'Manly Beach', 2],
  ['Maroubra Beach', -33.950198, 151.259302,,,'Maroubra Beach', 1]
];
function setMarkers(map, locations) {
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < locations.length; i++) {
        var item = locations[i];

        var myLatLng = new google.maps.LatLng(item[1], item[2]);
        bounds.extend(myLatLng);
        var address = item[5];

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
        });

        var content = address;

        var infowindow = new google.maps.InfoWindow()

        google.maps.event.addListener(marker, 'mouseover', (function (marker, content, infowindow) {
            return function () {
                infowindow.setContent(content);
                infowindow.open(map, marker);
            };
        })(marker, content, infowindow));
        google.maps.event.addListener(marker, 'mouseout', (function (marker, content, infowindow) {
            return function () {
                infowindow.close();
            };
        })(marker, content, infowindow));

    }
    map.fitBounds(bounds);
}

这也可以在jsfiddle中找到。只要您的事件监听器不与其他监听器冲突，它就会正常工作。

希望这有帮助。