Question

在我的网页上加载页面时，它会加载一个由我的数据库中的内容生成的表格，并且所有标记都会立即加载到地图上，但我希望能够点击表格行来居中并放大它代表的标记，我正在试图解决它，但我是JQuery / Javascript的新手，只是在我学习时学习。

这是我正在研究的JQuery函数..

$("table#listOfStops").find('tr').each(function() {
  $(this).on('click', function() {

      alert(arrMarkers.length);
      var num = $(this).data("num");
      for (var i = 0; i < arrMarkers.length; i++) {
        if ( arrMarkers.id == 'marker'+num) {
          map.setCenter(arrMarkers[i].position);
          map
        }
      }
  });
});

这是我的表：

  <table id="listOfStops" class="table table-striped">
  <thead>
  <tr>
    <th>Stop #</th>
    <th>Street Name</th>
  </tr>
  </thead>
  <tbody>
  <?php
  $i = 0;
  while($stmt -> fetch()) {
    echo '<tr  id="' . $i . '">';
    echo '<td>' . $gStopNumber . '</td>';
    echo '<td>' . $gStreetName . '</td>';
    echo '</tr>';
  $i++;} $stmt -> close(); $mysqli -> close(); ?>  
  </tbody>
  </table>

在页面加载时，它会加载此初始化函数：

function initialize() {
  geocode = new google.maps.Geocoder();
 var mapOptions = {
  zoom: 10,
  center: new google.maps.LatLng(56.7626362, -111.379652),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  disableDefaultUI: false,
  zoomControl: true,
  zoomControlOptions: {
    style: google.maps.ZoomControlStyle.LARGE
  }
};

  map = new google.maps.Map(document.getElementById('gmaps'),
  mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    var latitude = event.latLng.lat();
    var longitude = event.latLng.lng();
    deleteOverlays();
    addMarker(event.latLng);
    updateTextFields(latitude, longitude);
  });
  <?php while($stmt -> fetch()) { ?>
  var long = "<?php echo $gLongitude ?>";
  var lati = "<?php echo $gLatitude; ?>";
  var title = "<?php echo $gTitle; ?>"
  setMarker(lati, long, title);
  <?php } $stmt -> close(); $mysqli -> close();?>



}

然后将每个标记设置为地图并使用setMarker函数将它们推送到数组：

function setMarker(lat,lon, markerTitle) {
  var latLonMarker = new google.maps.LatLng(lat,lon);
  marker = new google.maps.Marker({
    position: latLonMarker,
    map: map,
    icon: 'icon.png',
    title: markerTitle
  });
  google.maps.event.addListener(marker, 'dragend', function() {
    $('#inputLatitude').val(this.getPosition().lat());
    $('#inputLongitude').val(this.getPosition().lng());
  });
  arrMarkers.push(marker);
}

我只是难以将表格行与标记数组中的正确标记点匹配，以设置类似map.setPosition(arrMarkers[i]);的位置

提前致谢。

Answer 1

jquery.each函数提供每个结果的索引。如果将查询修改为.find（'tbody tr'），则索引应与数组中的位置匹配如下所示：

$("table#listOfStops").find('tbody tr').each(function(idx) {
  var rowNumber=idx;
  $(this).on('click', function() {  
        map.setCenter(arrMarkers[rowNumber].getPosition());
  });
});

我正在尝试使用表格行点击来定位谷歌地图

1 个答案: