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 来完成我尝试过谷歌搜索的任务，但我想它不像你想象的那么受欢迎。谢谢。

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 回答