我有一个网站,左侧有地图,右侧有对应于地图上每个位置的信息框。如果我单击与该标记对应的div,该如何显示该标记的信息窗口?
PHP:
// the php i use to generate the info boxes i want to click on so the infoWindow pops up for the marker
echo "<div class='highlight' id='" .
$row["bar_name"] .
"'> <h3 class='barTitle bar'>" .
$row["bar_name"] .
"</h3> <h6 class='subTitle'>" .
$row["hourStart"] .
"-" .
$row["hourEnd"] .
" | " .
$row["area"] .
"</h6> <table align='center'> <tr> <th class='dowb'> <button bar_name='" .
$row["bar_name"] .
"' class='weekly'> HH </button></th> <th class='dowb'> <button bar_name='" .
$row["bar_name"] .
"' class='monday'> MON </button></th> <th class='dowb'> <button bar_name='" .
$row["bar_name"] .
"' class='tuesday'> TUE </button></th> <th class='dowb'> <button bar_name='" .
$row["bar_name"] .
"' class='wednesday'> WED </button></th> <th class='dowb'> <button bar_name='" .
$row["bar_name"] .
"' class='thursday'> THU </button></th> <th class='dowb'> <button bar_name='" .
$row["bar_name"] .
"' class='friday'> FRI </button></th> <th class='dowb'> <button bar_name='" .
$row["bar_name"] .
"' class='saturday'> SAT </button></th> <th class='dowb'> <button bar_name='" .
$row["bar_name"] .
"' class='sunday'> SUN </button></th> <br> </tr> </table> <br> <table align='center' class='dowd'> <tr> <th class='barInfoTitle'> Happy Hour Drinks:</th> <th class='barInfoTitle'> Happy Hour Food: </th></tr> <tr> <th class='barInfo' class='dowDrink'>" .
$row["weeklyDealDrinks"] .
"</th> <th class='barInfo' class='dowFood'> " .
$row["weeklyDealFood"] .
" </th> </tr> </table> <div align='center'> <a href='" .
$row["profile_page"] .
"'> More Info </a></div> <hr> </div> \n";
Javascript:
// Creates info window on click/ highlights box (this code is by my other code for adding the google map
var highlight = [];
var infoWindow = new google.maps.InfoWindow(), marker, i;
google.maps.event.addListener(marker, "click", (function (marker, i) {
return function () {
infoWindow.setContent(locations[i][3]);
infoWindow.open(map, marker);
highlight.shift();
highlight.push(locations[i][0]);
for (var j = 0; j < locations.length; j++) {
var check = document.getElementById(locations[j][0]);
if (highlight[0] != locations[j][0]) {
if (check.classList.contains("active")) {
check.classList.remove("active");
}
}
}
}
}
//the js I hvae to try and get the window to pop up (this code is after the previous code)
$(document).ready(function () {
$(".highlight").on('click', function (event) {
event.stopPropagation();
event.stopImmediatePropagation();
alert("works");
infowindow.open(map, Marker);
})
};
答案 0 :(得分:1)
如果要在信息窗口中显示每个标记的位置信息,则需要为每个对应的位置选择适当的唯一标记。这可以通过多种方式来完成,例如通过创建标记数组,然后将信息窗口的click事件添加到数组中的每个标记。
看看下面的代码示例以获取指导:
int *p = x.dat+3;
希望这会有所帮助!