Question

更新：

我正在根据数据库信息向谷歌地图添加标记和信息窗口。

在每个信息窗口中，我将从数据库中的其他信息添加<select><option> ... </select>元素。

我无法工作的是当用户在信息窗口中从该列表中选择一个项目时调用一个处理程序。

如果<select>元素在信息窗口之外，则：

 $('#route').on('change', function(evt, params) {
       // The name selected
       alert($(this).attr('name'));
       // The value
                alert($(this).val());
 });

工作正常。但是一旦它出现在Info窗口中，这当然不再有效，因为信息窗口不在DOM中。

jQuery调用返回一个JSON对象，其中包含名称，电话号码等，用于填充InfoWindow。我使用一个持久变量activeDrivers，它是一个类似格式的JSON对象数组，用于填充<select> <option>。我对此代码没有错误，但同样地，我也没有得到任何结果。

我尝试了各种方法将事件监听器添加到地图中：

jQuery.getJSON(url, function(data) {
   var myLatLng = data.Location;
   var marker = new google.maps.Marker({
       position: myLatLng,
       map: map,
       animation: google.maps.Animation.DROP,
       title: data.Name,
       icon: icon
   });
   if(getType() == 'driver'){
       activeDrivers.push(data);
   }
   else {
       activeAttendees.push(data);
   }
   markers.push(marker);
   var contentString = '<div id="content">' +
      '<h1 id="firstHeading" class="firstHeading">' + data.Name + '<\/h1>' +
      '<div id="bodyContent">' +
      '<p>' + data.Address + ' ' + data.City + ', ' + data.State + '<\/p>' +
      '<p><a href=\"tel:"' + data.HomePhone + '">' + data.HomePhone + '<\/a><\/p><p>';
      if(data.hasOwnProperty('Notes')){
         contentString += '<strong>Notes: ' + data.Notes + '<\/strong><\/p>';
      }
      contentString += '<div><p>';
      if(getType() == 'attendee'){
          var selectDriver = '<select class=\'route\' name=\'' + data.id + '\'>';
          for(var x = 0; x < activeDrivers.length; x++){
               selectDriver += "<option value=\"" + activeDrivers[x].id + "\">" + activeDrivers[x].Name + "</option>";
          }
          selectDriver += "<\/select>";
          contentString += selectDriver;
      }
      contentString += '<\/div></div>';
      var infowindow = new google.maps.InfoWindow({
          content: contentString
      });
      marker.addListener('click', function() {
          infowindow.open(map, marker);
      });
      infowindow.addListener('domready', function() {
          $('#route').on('change', function(evt, params) {
            // The name 
            alert($(this).attr('name'));
            // The value
            alert($(this).val());
          });
      }); // end addListener
});

但到目前为止，似乎没有任何效果。

我可以使用jQuery，如果有帮助的话。

建议？

Answer 1

您需要在infowindow上的domready事件中添加一个事件监听器。

这对我不起作用，看起来不正确：

map.addListener(infowindow, 'domready', function() {
    $('#route').on('change', function(evt, params) {
         // The name 
         alert($(this).attr('name'));
         // The value
         alert($(this).val());
     });
}); // end addListener

我用过这个：

google.maps.event.addListener(infowindow, 'domready', function() {
 $('#route').on('change', function(evt, params) {
    console.log($(this).val());
    calculateAndDisplayRoute(directionsService, directionsDisplay, $(this).val());
  });
}); // end addListener

proof of concept fiddle

代码段

function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {
      lat: 41.85,
      lng: -87.65
    }
  });
  // Indianapolis, IN, USA (39.768403, -86.15806800000001)
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(39.768403, -86.158068),
    map: map
  });
  var infowindow = new google.maps.InfoWindow({
    content: '<select id="route"><option value="kingman, az ">Kingman</option><option value="barstow, ca ">Barstow</option><option value="san bernardino, ca ">San Bernardino</option>option value="los angeles, ca ">Los Angeles</option></select>'
  });
  marker.addListener('click', function(evt) {
    infowindow.open(map, marker);
  });
  google.maps.event.trigger(marker, 'click')
  google.maps.event.addListener(infowindow, 'domready', function() {
    $('#route').on('change', function(evt, params) {
      // The name 
      // alert($(this).attr('name'));
      // The value
      console.log($(this).val());
      calculateAndDisplayRoute(directionsService, directionsDisplay, $(this).val());
    });
  }); // end addListener 
  directionsDisplay.setMap(map);
  calculateAndDisplayRoute(directionsService, directionsDisplay);

  var onChangeHandler = function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  };
  document.getElementById('start').addEventListener('change', onChangeHandler);
  document.getElementById('end').addEventListener('change', onChangeHandler);
}

function calculateAndDisplayRoute(directionsService, directionsDisplay, end) {
  if (!end) end = document.getElementById('end').value
  directionsService.route({
    origin: document.getElementById('start').value,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="floating-panel">
  <b>Start: </b>
  <select id="start">
    <option value="chicago, il">Chicago</option>
    <option value="st louis, mo">St Louis</option>
    <option value="joplin, mo">Joplin, MO</option>
    <option value="oklahoma city, ok">Oklahoma City</option>
    <option value="amarillo, tx">Amarillo</option>
    <option value="gallup, nm">Gallup, NM</option>
    <option value="flagstaff, az">Flagstaff, AZ</option>
    <option value="winona, az">Winona</option>
    <option value="kingman, az">Kingman</option>
    <option value="barstow, ca">Barstow</option>
    <option value="san bernardino, ca">San Bernardino</option>
    <option value="los angeles, ca">Los Angeles</option>
  </select>
  <b>End: </b>
  <select id="end">
    <option value="chicago, il">Chicago</option>
    <option value="st louis, mo" selected="selected">St Louis</option>
    <option value="joplin, mo">Joplin, MO</option>
    <option value="oklahoma city, ok">Oklahoma City</option>
    <option value="amarillo, tx">Amarillo</option>
    <option value="gallup, nm">Gallup, NM</option>
    <option value="flagstaff, az">Flagstaff, AZ</option>
    <option value="winona, az">Winona</option>
    <option value="kingman, az">Kingman</option>
    <option value="barstow, ca">Barstow</option>
    <option value="san bernardino, ca">San Bernardino</option>
    <option value="los angeles, ca">Los Angeles</option>
  </select>
</div>
<div id="map"></div>

将on（'change'）的事件监听器添加到Google Maps Info Window

1 个答案: