将事件监听器的on（'change'）添加到Google Maps信息窗口

debugcn 发表于 Dev

戴维斯

更新：

我正在基于数据库信息向Google地图添加标记和信息窗口。

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

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

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

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

工作良好。但是，一旦它进入了“信息”窗口，这当然就不再起作用了，因为信息窗口不在DOM中。

jQuery调用返回一个具有名称，电话号码等的JSON对象，我用它来填充InfoWindow。我使用一个持久变量activeDrivers，该变量是一组格式类似的JSON对象，用于填充<select> <option>s。我在此代码上没有任何错误，但是类似地，我也没有任何结果。

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

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，如果有帮助的话。

有什么建议吗？

地理编码

您需要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

概念证明

代码段：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。