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

看一看

尝试/实现方法：

  <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>

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

右侧：有一个表，其中包含来自MySQL数据库的纬度和经度值

我的方法：

  <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的初学者

问题：

  <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>

• 我一点也不确定这种做法是否是最佳做法 这是不是
• 是否可能，如果可能，如何实现
• 有人能帮我解释一下吗

---

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

这是你的密码

纬度：42.3145186
LON：-71.110367
$（'tr'）。单击（函数（）{
设lat=$（this）.find（'td:first child'）.text（）.replace（'lat:'，''）；
让lon=$（this.find（'td:last child'）.text（）.replace（'lon:'，''）；
让新地图=”；
$（'div.gmap_canvas'）.html（新地图）；
});
此处代码的答案是非常令人沮丧的，请考虑通过解释如何回答OP的问题来改进这篇文章，以便不将此标记为低质量。谢谢您的回答，我的查询被解决了。