-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 に答える