Question

我有一个网站，左侧有地图，右侧有对应于地图上每个位置的信息框。如果我单击与该标记对应的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);
    })
};

Answer 1

如果要在信息窗口中显示每个标记的位置信息，则需要为每个对应的位置选择适当的唯一标记。这可以通过多种方式来完成，例如通过创建标记数组，然后将信息窗口的click事件添加到数组中的每个标记。

看看下面的代码示例以获取指导：

int *p = x.dat+3;

希望这会有所帮助！

单击一个元素会导致弹出信息窗口

1 个答案: