谷歌地图关闭信息窗口时，另一个标记点​​击

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

不要在循环内创建infowindow。您只需要一个对象并根据您点击的标记设置其内容。

您还需要在标记点击侦听器周围使用闭包。类似的东西：

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>