Question

在我的地图上，它会加载一个表格，左边是地图列表，右边是地图，我希望能够点击表格行并让地图居中并缩放标记。我像这样加载表行：

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

Answer 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号部分）中提供相应的数字，并按如下方式绑定click事件：

$("#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;
                }
            }
        }
    );
});

我希望能够点击一个表格行来居中并放大一个标记

1 个答案: