0

私のマップでは、左側にスポットのリスト、右側にマップを含むテーブルが読み込まれます。テーブルの行をクリックして、マップを中央に配置し、マーカーをズームできるようにしたいと考えています。次のようにテーブル行をロードします。

  <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="arrMarker[' . $i . ']">';
    echo '<td>' . $gStopNumber . '</td>';
    echo '<td>' . $gStreetName . '</td>';
    echo '</tr>';
  $i++;} $stmt -> close(); $mysqli -> close(); ?>  
  </tbody>
  </table>

そして今、私は自分の仕事を完了するためにJQueryが必要なだけです.Googleを試してみましたが、あなたが思っているほど人気が​​ないと思います. ありがとう。

4

1 に答える 1

1

私も似たようなことをしたことがありますので、その方法を紹介します。

マーカーを作成するときは、必ず「id」を付けて (できれば数値要素を使用して)、マーカーを配列に追加してください。

var map;  // A  reference to 'the' Google map 
var markers = [];
var num = 1; // Increment for additional markers
var _id = 'marker'+num;
var _title = 'Marker ' + num;
var _pos = new google.maps.LatLng(lat, lng);
var zoom = 6;

var _marker = new google.maps.Marker({
    id: _id,
    position: _pos,
    map: map,
    title: _title,
   animation : google.maps.Animation.DROP
});

markers.push(_marker);

TR 要素の ID または data-num 属性 (ID 番号の部分を含む) に対応する番号を指定し、次のようにクリック イベントをバインドします。

$("#listOfStops").children("tr").each(function() {
    $(this).on(
        'click',
        function() {
            var num = $(this).data("num"); // Assuming you've given it a data attribute
            for (var i = 0; i < markers.length; i++) {
                if (markers[i].id=='marker'+num) {
                    map.setCenter(markers[i].position);
                    map.setZoom(zoom);
                    break;
                }
            }
        }
    );
});
于 2013-03-06T10:11:55.260 に答える