如何在不重新加载页面的情况下使用经纬度坐标动态更改谷歌地图上的位置点

debugcn 发表于 Dev

NS789

看一看。

尝试/实现方式：

左侧：当我在（右侧）选择表格行时，Google 地图应该显示 LON、LAT 的基础上的位置。但无需重新加载页面。

右侧：有一个表，其中包含来自 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 的初学者。

问题：

我完全不确定这种方法是否是最佳实践。
是否有可能，如果有，如何？
任何人都可以帮助我阐明这一点吗？

骨头

您需要为所有 'tr' 标签创建一个点击事件，从 'td' 获取 lon 和 lat 的值，替换非数字文本并更改 .gmap_canvas div 中的 html，它包装了您的 iframe。

这里你的代码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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。