时间戳

首页 > 解决方案 > addEventListener 在点击时不显示信息窗口（JavaScript）

javascript - addEventListener 在点击时不显示信息窗口（JavaScript）

问题描述

我正在为使用 Google Places and Maps JavaScript API 的灾难管理实验室任务开发 Web 应用程序。目标是在地图上添加标记，这些标记附加到事件侦听器，该事件侦听器应该显示一个包含有关灾难报告数据的信息窗口。但是，当我单击标记时，该窗口未显示。当我将鼠标悬停在某个点上时会显示指针图标，但单击标记时不会出现任何信息窗口。当我通过 IntelliJ 和 Tomcat 运行开发控制台时，它的错误为零，我尝试更改addListener为，addEventListener但它仍然无法正常工作。我将在下面发布我的代码，但如果您需要其他帮助，请告诉我。出于安全原因，我已将我的 API 密钥替换为MY_API_KEY，所以我想您必须自己访问 Google API 才能提供帮助，所以对此我深表歉意。谢谢！

PS 当我尝试创建代码片段时，它出现了以下错误，我不确定错误来自哪里，因为 JS 代码中没有第 302 行： { "message": "Uncaught SyntaxError: Unexpected end of input", "filename": "https://stacksnippets.net/js", "lineno": 302, "colno": 5 }

以下是信息窗口的外观：

在此处输入图像描述

//loadform.js
function onSelectReportType(ele) {
  var form = $(ele).parent().parent();
  var label = $(form).find(".additional_msg");
  var select = $(form).find(".additional_msg_select");

  switch (ele.value) {
    case "donation":
    case "request":
      label.text("Resource Type:");
      select.find('option').remove();
      select.append($("<option></option>")
        .attr("value", "")
        .text("Choose the resource type"));
      selectValues = ['water', 'food', 'money', 'medicine', 'cloth',
        'rescue/volunteer'
      ];
      $.each(selectValues, function(index, value) {
        select.append($("<option></option>")
          .attr("value", value)
          .text(value));
      });
      break;
    case "damage":
      label.text("Damage Type:");
      select.find('option').remove();
      select.append($("<option></option>")
        .attr("value", "")
        .text("Choose the damage type"));
      selectValues = ['polution', 'building damage', 'road damage', 'casualty',
        'other'
      ];
      $.each(selectValues, function(index, value) {
        select.append($("<option></option>")
          .attr("value", value)
          .text(value));
      });
      break;
    default:
      $(form).find(".additional_msg_div").css("visibility", "hidden");
      return;
  }
  $(form).find(".additional_msg_div").css("visibility", "visible");


  //loadmap.js
  var map;
  var infowindow = new google.maps.InfoWindow();

  function initialization() {
    showAllReports();
  }

  function showAllReports() {
    $.ajax({
      url: 'HttpServlet',
      type: 'POST',
      data: {
        "tab_id": "1"
      },
      success: function(reports) {
        mapInitialization(reports);
      },
      error: function(xhr, status, error) {
        alert("An AJAX error occured: " + status + "\nError: " + error);
      }
    });
  }

  function mapInitialization(reports) {
    var mapOptions = {
      mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
    };

    // Render the map within the empty div
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var bounds = new google.maps.LatLngBounds();

    $.each(reports, function(i, e) {
      var long = Number(e['longitude']);
      var lat = Number(e['latitude']);
      var latlng = new google.maps.LatLng(lat, long);

      bounds.extend(latlng);

      // Create the infoWindow content
      var contentStr = '<h4>Report Details</h4><hr>';
      contentStr += '<p><b>' + 'Disaster' + ':</b>&nbsp' + e['disaster'] + '</p>';
      contentStr += '<p><b>' + 'Report Type' + ':</b>&nbsp' + e['report_type'] +
        '</p>';
      if (e['report_type'] == 'request' || e['report_type'] == 'donation') {
        contentStr += '<p><b>' + 'Resource Type' + ':</b>&nbsp' +
          e['resource_type'] + '</p>';
      } else if (e['report_type'] == 'damage') {
        contentStr += '<p><b>' + 'Damage Type' + ':</b>&nbsp' + e['damage_type'] +
          '</p>';
      }
      contentStr += '<p><b>' + 'Timestamp' + ':</b>&nbsp' +
        e['time_stamp'].substring(0, 19) + '</p>';
      if ('message' in e) {
        contentStr += '<p><b>' + 'Message' + ':</b>&nbsp' + e['message'] + '</p>';
      }

      // Create the marker
      var marker = new google.maps.Marker({ // Set the marker
        position: latlng, // Position marker to coordinates
        map: map, // assign the market to our map variable
        customInfo: contentStr,
      });

      // Add a Click Listener to the marker
      google.maps.event.addEventListener(marker, 'click', function() {
        // use 'customInfo' to customize infoWindow
        infowindow.setContent(marker['customInfo']);
        infowindow.open(map, marker); // Open InfoWindow
      });

    });

    map.fitBounds(bounds);

  }


  //Execute our 'initialization' function once the page has loaded.
  google.maps.event.addDomListener(window, 'load', initialization);
html,
body {
  background-color: #f5f5f5;
}

body {
  padding-top: 50px;
}

.container-fluid,
.row {
  background-color: #f5f5f5;
}

.sidebar {
  padding: 12px;
  background-color: #f5f5f5;
}

form {
  padding-top: 12px;
}

#map-canvas {
  height: 100%;
  position: absolute;
  right: 0;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Web Project</title>

  <!-- Custom styles -->
  <link rel="stylesheet" href="css/style.css">

  <!-- jQuery -->
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

  <!-- Google Map js libraries -->
  <script src="https://maps.googleapis.com/maps/api/js?&key=MY_API_KEY&libraries=places,visualization"></script>
</head>

<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <a class="navbar-brand">Disaster Management Portal</a>
  </nav>

  <div class="container-fluid">
    <div class="row">
      <div class="sidebar col-xs-3">

        <!-- Tab Navis-->
        <ul class="nav nav-tabs">
          <li class="active"><a href="#create_report" data-toggle="tab">Create Report</a></li>
          <li><a href="#query_report" data-toggle="tab">Query</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content ">
          <!-- Create Report Tab Panel -->
          <div class="tab-pane active" id="create_report">
            <form id="create_report_form">
              <div><label>First Name:&nbsp</label><input placeholder="Your first name" name="fN"></div>
              <div><label>Last Name:&nbsp</label><input placeholder="Your last name" name="lN"></div>
              <div>
                <label><input type="radio" name="is_male" value="t">&nbspMale</label>
                <label><input type="radio" name="is_male" value="f">&nbspFemale</label>
              </div>
              <div><label>Age:&nbsp</label><input placeholder="Your age" name="age"></div>
              <div><label>Blood Type:</label>
                <select name="blood_type">
                  <option value="">Choose your blood type</option>
                  <option value="A">A</option>
                  <option value="B">B</option>
                  <option value="O">O</option>
                  <option value="AB">AB</option>
                  <option value="Other">Other</option>
                </select>
              </div>
              <div><label>Tel:&nbsp</label><input placeholder="Your telephone number" name="tel"></div>
              <div><label>Email:&nbsp</label><input placeholder="Your email address" name="email"></div>
              <div><label>Contact's First Name:&nbsp</label><input placeholder="Contact's first name" name="contact_fN"></div>
              <div><label>Contact's Last Name:&nbsp</label><input placeholder="Contact's last name" name="contact_lN"></div>
              <div><label>Contact's Tel:&nbsp</label><input placeholder="Contact's telephone number" name="contact_tel"></div>
              <div><label>Contact's Email:&nbsp</label><input placeholder="Contact's email address" name="contact_email"></div>
              <div><label>Report Type:</label>
                <select onchange="onSelectReportType(this)" name="report_type">
                  <option value="">Choose the report type</option>
                  <option value="donation">Donation</option>
                  <option value="request">Request</option>
                  <option value="damage">Damage Report</option>
                </select>
              </div>
              <div class="additional_msg_div" style="visibility: hidden"><label class="additional_msg"></label>
                <select class="additional_msg_select" name="additional_message"></select>
              </div>
              <div><label>Disaster Type:</label>
                <select name="disaster_type">
                  <option value="">Choose the disaster type</option>
                  <option value="flood">flood</option>
                  <option value="wildfire">wildfire</option>
                  <option value="earthquake">earthquake</option>
                  <option value="tornado">tornado</option>
                  <option value="hurricane">hurricane</option>
                  <option value="other">other</option>
                </select>
              </div>
              <div><label>Address:</label>
                <input id="autocomplete" placeholder="Address">
              </div>
              <div><label>Comment:&nbsp</label><input placeholder="Additional message" name="message"></div>
              <button type="submit" class="btn btn-default" id="report_submit_btn">
                            <span class="glyphicon glyphicon-star"></span> Submit
                        </button>
            </form>
          </div>

          <!-- Query Report Tab Panel -->
          <div class="tab-pane" id="query_report">
            <form id="query_report_form">
              <div><label>Report Type:</label>
                <select onchange="onSelectReportType(this)" name="report_type">
                  <option value="">Choose the report type</option>
                  <option value="donation">Donation</option>
                  <option value="request">Request</option>
                  <option value="damage">Damage Report</option>
                </select>
              </div>
              <div class="additional_msg_div" style="visibility: hidden"><label class="additional_msg"></label>
                <select class="additional_msg_select" name="resource_or_damage"></select>
              </div>
              <div><label>Disaster Type:</label>
                <select name="disaster_type">
                  <option value="">Choose the disaster type</option>
                  <option value="flood">flood</option>
                  <option value="wildfire">wildfire</option>
                  <option value="earthquake">earthquake</option>
                  <option value="tornado">tornado</option>
                  <option value="hurricane">hurricane</option>
                  <option value="other">other</option>
                </select>
              </div>
              <button type="submit" class="btn btn-default">
                            <span class="glyphicon glyphicon-star"></span> Submit the query
                        </button>
            </form>
          </div>
        </div>
      </div>

      <div id="map-canvas" class="col-xs-9"></div>

    </div>
  </div>
</body>

</html>

标签： javascripthtmlcssjava-8google-api

解决方案

谢谢兰迪的解决方案！我不得不修改谷歌地图文档中的示例以匹配实验室想要的内容，但我想通了。我包含了infowindow.setContent(marker['customInfo']);原始代码中的 ，并更改了代码以匹配文档中的语法。

这是 Click Listener 的工作代码：

        // Add a Click Listener to the marker
        marker.addListener('click', () => {
            infowindow.setContent(marker['customInfo']);
            infowindow.open({
                anchor: marker,
                map,
                shouldFocus: false,
            });
        });

推荐阅读