如何在不重新加載頁面的情況下使用經度和緯度坐標動態更改Google地圖上的位置點

Question

看一看。

嘗試/實現的方法：

左手邊：當我在（右側）選擇表格行時，應該在LON，LAT的基礎上顯示位置的Google Maps。 但無需重新加載頁面。

右手邊：有一個表，其中包含來自MySQL DB的LATITUDE和LONGITUDE值。

我的方法：

  <div class="row">

        <div class="col-md-6">
            <div class="mapouter">
                        <div class="gmap_canvas">
                            <iframe width="600" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=32.7333,74.8667&hl=es;z=14&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
                        </div>              
                    </div>
            </div>

          <div class="col-md-6" >
             <table class="table " style="margin-left: 30px;"> 
                <tbody>

              <?php 

                 while($row=mysqli_fetch_array($res)) 
                 {
                    $lat =$row['lat']; 
                    $lon =$row['lon'];


                  <tr class="bg-success">

                    <td><?php  echo $lat;?></td>
                    <td><?php  echo $lon;?></td>

                  </tr >

                  <?php
                 }
                  ?>
                </tbody>
              </table>
        </div>

我不確定如何在jquery中完成此操作，很抱歉，我是jquery的初學者。

問題：

• 我完全不確定這種方法是否是最佳實踐。
• 如果可能，怎么可能？
• 誰能幫助我闡明這一點？

Answer 1

您需要為所有“ tr”標簽創建click事件，從“ td”獲取lon和lat的值，替換非數字文本，並在.gmap_canvas div（包裹了iframe）中更改html。

這是您的代碼https://jsfiddle.net/mshz0gvu/

<div class="row">
  <div class="col-md-6">
    <div class="mapouter">
      <div class="gmap_canvas">
        <iframe width="100%" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=32.7333,74.8667&hl=es;z=14&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
      </div>              
    </div>
  </div>
  <div class="col-md-6" >
    <table class="table " style="margin-left: 30px;"> 
      <tbody>
        <tr>
          <td>LAT: 42.3145186</td>
          <td>LON: -71.110367</td>
        </tr >
      </tbody>
    </table>
  </div>
</div>
<script>
$('tr').click(function(){
    let lat = $(this).find('td:first-child').text().replace('LAT: ', '');
    let lon = $(this).find('td:last-child').text().replace('LON: ', '');
    let new_map = "<iframe width=\"100%\" height=\"500\" id=\"gmap_canvas\" src=\"https://maps.google.com/maps?q="+lat+","+lon+"&hl=es;z=14&amp;output=embed\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\"></iframe>";
    $('div.gmap_canvas').html(new_map);
});
</script>