我試圖定位谷歌地圖與表格行點擊

Question

在我的網頁上，當頁面加載時，它會加載一個由我的數據庫中的內容生成的表格，並且所有標記都立即加載到地圖上，但是我想能夠點擊表格中心並放大它代表的標記，我試圖找出它，但我是新來的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]);

感謝。

Answer 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()); 
    }); 
});