單擊另一個標記時，Google 地圖會關閉信息窗口

Question

我知道有很多問題與我的問題有關。 但是我已經看過幾乎所有這些並嘗試應用其中的一些。 但什么也沒有發生。 下面是我的代碼

 var locations =
        [{ "id": 1, "ReferenceNumber": "52525252525", "Address" : "School" , "Latitude": "21.585486", "Longitude": "50.258745" },
         { "id": 2, "ReferenceNumber": "6262626262", "Address" : "University", "Latitude": "21.54484411", "Longitude": "50.14846648" },
         { "id": 3, "ReferenceNumber": "424242424", "Address": "PUMPING STATION ", "Latitude": "21.9856341", "Longitude": "61.2587466" }];

我添加的上述位置只有少數帶有假條目，否則我有超過 150 個位置

$.each(locations, function(i, item) {

    var marker = new google.maps.Marker({
        'position': new google.maps.LatLng(item.Latitude, item.Longitude),
        'map': map,
        'title': item.Latitude + "," + item.Longitude
    });

    marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png')

    var infowindow = new google.maps.InfoWindow({
        content: "<div class='infoDiv'><h3>Reference#: </h3> <h6>" + item.ReferenceNumber + "<h3>Location: </h3> <h6>" + item.Address + "</div></div>"
    });

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

    google.maps.event.addListener(map, "click", function(event) {
        infowindow.close();
        //autoCenter();
    });
})

任何幫助將不勝感激。

Answer 1

不要在循環內創建信息窗口。 您只需要一個對象並根據您單擊的標記設置其內容。

您還需要在標記單擊偵聽器周圍使用閉包。 類似的東西：

google.maps.event.addListener(marker, 'click', (function(marker) {

  return function() {

    // Something here
  }

})(marker));

下面的工作示例。

 function initialize() { var mapOptions = { zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(1, 1) }; var locations = [ [new google.maps.LatLng(0, 0), 'Marker 1', 'Infowindow content for Marker 1'], [new google.maps.LatLng(0, 1), 'Marker 2', 'Infowindow content for Marker 2'], [new google.maps.LatLng(0, 2), 'Marker 3', 'Infowindow content for Marker 3'], [new google.maps.LatLng(1, 0), 'Marker 4', 'Infowindow content for Marker 4'], [new google.maps.LatLng(1, 1), 'Marker 5', 'Infowindow content for Marker 5'], [new google.maps.LatLng(1, 2), 'Marker 6', 'Infowindow content for Marker 6'] ]; var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var infowindow = new google.maps.InfoWindow(); $.each(locations, function(i, item) { var marker = new google.maps.Marker({ position: item[0], map: map, title: item[1], }); google.maps.event.addListener(marker, 'click', (function(marker) { return function() { infowindow.setContent(item[2]); infowindow.open(map, marker); } })(marker)); }); } google.maps.event.addDomListener(window, 'load', initialize);

 #map-canvas { height: 150px; }

 <div id="map-canvas"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>