使用Google Maps JavaScript API的無標記Infowindows

Question

我正在使用Google Maps JavaScript API創建熱圖圖層。我想在地圖上的100多個位置添加鼠標懸停事件，以顯示infowindow。如果我爲每個事件使用標記，這會變得非常混亂，所以我希望找到一種完全消除標記的方法（儘管我把一個醜陋的解決方案放在一起，其中一個按鈕將顯示/隱藏這些標記）。我的第一個想法是使用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); 
}