我正在建立一个酒店网站,并在地图上显示酒店。 我使用的是AngularJS代码和Google Maps Javascript API(https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple)提供的示例代码。
我的代码如下 -
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: coord
});
$http.post("/events/hotel_search", { city : city, facilities : facilities }).then(function(response) {
$scope.hotels = response.data.hotels;
var image = '/img/bed.png';
$scope.hotels.forEach(function(h){
var contentString= '<div style="width:350px"><div style="width:130px;float:left"><img src="'+h.images[0]+'" width="130" /><h4>'+h.name+'</h4></div><div style="width:200px;float:left;padding-left:20px"><p style="font-size:150%;color:orange">200-500$/night</p><p style="font-size:80%">'+h.address+'</p><div class="star-rating-r"><a href="#"><img alt="" src="img/rating-b.png"></a><a href="#"><img alt="" src="img/rating-b.png"></a><a href="#"><img alt="" src="img/rating-b.png"></a><a href="#"><img alt="" src="img/rating-b.png"></a><a href="#"><img alt="" src="img/rating-a.png"></a></div><p><br/><div class="cat-icons"><span class="cat-icon-01 active"></span><span class="cat-icon-02"></span><span class="cat-icon-03"></span><span class="cat-icon-04"></span><span class="cat-icon-05"></span><span class="cat-icon-06"></span><div class="clear"></div></div></p><button class="srch-btn xbtn" style="margin-top:20px;float:right" id="'+h._id+'">SELECT HOTEL</button></div></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var beachMarker = new google.maps.Marker({
position: {lat: h.lat, lng: h.lng },
map: map,
icon: image
});
beachMarker.addListener('click', function() {
infowindow.open(map, beachMarker);
});
})
});
}
我的问题是,当有人点击infowindow内的按钮时,我没有注册点击事件。我指的是选择酒店&#39;按钮。我该怎么做?