如何在不重新加载页面的情况下使用经度和纬度坐标动态更改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>