-1

在我的网页上，当页面加载时，它会加载由我的数据库中的内容生成的表格，并且所有标记都会立即加载到地图上，但我希望能够单击表格行以居中并放大标记它代表着，我正在努力弄清楚，但我是 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]);

提前致谢。

4

1 回答 1

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());
  });
});
于 2013-03-07T00:50:00.100 回答