使用Google Maps JavaScript API的无标记的信息窗口

Question

我正在使用Google Maps JavaScript API创建热图图层。 我想将鼠标悬停事件添加到地图上的100多个位置，以显示一个信息窗口。 如果我在每个事件中都使用标记，这将变得很混乱，所以我希望找到一种完全消除标记的方法（尽管我确实弄糟了一个解决方案，其中按钮将显示/隐藏这些标记）。 我的第一个想法是使用LatLngBounds。 作为一个简单的例子：

var infowindow = new google.maps.InfoWindow(
  { content: "some info",
    size: new google.maps.Size(50,50)
  });
var southWest = new google.maps.LatLng(-31.203405,125.244141);
var northEast = new google.maps.LatLng(-25.363882,131.044922);
var loc = new google.maps.LatLngBounds(southWest,northEast);
google.maps.event.addListener(loc, 'mouseover', function() {
  infowindow.open(map);
}); 
google.maps.event.addListener(loc, 'mouseout', function() {
  infowindow.close();
});

但是，无论出于何种原因，mouseover事件似乎都不会发生。 代码有问题吗？ 有没有比使用LatLngBounds更好的方法呢？

Answer 1

首先，您应该创建一个带有边界的新矩形：

var southWest = new google.maps.LatLng(-31.203405,125.244141);
var northEast = new google.maps.LatLng(-25.363882,131.044922);
var loc = new google.maps.LatLngBounds(southWest,northEast);


var rectangle = new google.maps.Rectangle({
    bounds: loc,
    editable: false,
    draggable: false,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

rectangle.setMap(map);

然后只需在该矩形上使用事件监听器

google.maps.event.addListener(rectangle, 'mouseover', openInfoWindow);

function openInfoWindow(event) {
    var ne = rectangle.getBounds().getNorthEast();
    var sw = rectangle.getBounds().getSouthWest();

    var content = 'Infowindow content';

    // Set the info window's content and position.
    infoWindow.setContent(contentString);
    infoWindow.setPosition(ne);
    infoWindow.open(map);
}