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