时间戳

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

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

问题描述

看一看。

尝试/实现方式：

这里

左侧：当我在（右侧）选择表格行时，应该显示 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 的初学者。

问题：

标签： javascriptphpjqueryhtmlgoogle-maps

解决方案

您需要为所有“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>

推荐阅读