单击元素会弹出信息窗口

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

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

查看以下代码示例以获得指导：

let marker;
let infowindow;

// Declare array of markers
let markers = [];

// Iterate over all your locations
for (let i = 0; i < locations.length; i++) {

  // Create marker
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][0], locations[i][1]),
    map: map
  });

  // Add marker to markers array
  markers[i] = marker;

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

    if (infowindow) {
      infowindow.close();
    }

    // Create new info window
    infowindow = new google.maps.InfoWindow();

    // Set info window content for this unique marker/location
    infowindow.setContent(locations[i][2]);

    // Open info window for this unique marker
    infowindow.open(map, markers[i]);

  });
}

希望这会有所帮助！