javascript - 如何使用php和jquery在谷歌地图中动态添加纬度和经度？

Question

我正在尝试使用 php 或 jquery 将纬度和经度值加载到下面的谷歌地图链接中，但找不到方法。

https://maps.google.com/maps?q=31.1033,77.1722&hl=es;z=14&output=embed

我在引导模式中创建了一个静态谷歌地图 iframe 加载器作为下面的演示。但我正在寻找的是动态添加纬度和经度到q=31.1033,77.1722中。我已经在数据库中创建了 2 个列，我想将这些值添加到 q=$lat,$lon 中，但如果有人有任何想法将不胜感激。

	 $('#myModalmap').on('shown.bs.modal', (function() {
      var mapIsAdded = false;
    
      return function() {
        if (!mapIsAdded) {
            
          $('.modal-body').html('<iframe src="https://maps.google.com/maps?q=31.1033,77.1722&hl=es;z=14&amp;output=embed" width="100%" height="400" frameborder="0" style="border:0"></iframe>');
    
          mapIsAdded = true;
        }    
      };
    })());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!-- Latest glyphonic cdn -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">


<button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModalmap"><i class="fas fa-info-circle"></i></button>

   <!-- Map MODAL-->
            <div class="modal fade" id="myModalmap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">coordinate </h4>
                  </div>
                  <div class="modal-body">
                     
                      
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
               
                  </div>
                </div>
              </div>
            </div>

	

Answer 1

要动态声明纬度或经度，您可以将查询数据存储到数组中:

var latlong = [{lat: 31.1033, long:77.1722},{lat: 38.1033, long: 74.1722}];

您可以通过根据选择更改值来进行操作:

var i=1;
$('.modal-body').html('<iframe src="https://maps.google.com/maps?q='+latlong[i].lat+','+latlong[i].long+'&hl=es;z=14&amp;output=embed" width="100%" height="400" frameborder="0" style="border:0"></iframe>');

示例:

var latlong = [{lat: 31.1033, long:77.1722},{lat: 38.1033, long: 74.1722}];
var i=$('select#coordinatechoice').val();

$("select#coordinatechoice").change(function(){
  i=$('select#coordinatechoice').val();
  init();
});

function init(){
$('#myModalmap').on('shown.bs.modal', (function() {
      var mapIsAdded = false;
    
      return function() {
        if (!mapIsAdded) {
            
          $('.modal-body').html('<iframe src="https://maps.google.com/maps?q='+latlong[i].lat+','+latlong[i].long+'&hl=es;z=14&amp;output=embed" width="100%" height="400" frameborder="0" style="border:0"></iframe>');
    
          mapIsAdded = true;
        }    
      };
    })());
}
init();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<!-- Latest glyphonic cdn -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">


<button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModalmap"><i class="fas fa-info-circle"></i></button>
<select id="coordinatechoice">
<option value="0">First coordinate</option>
<option value="1">Second coordinate</option>
</select>
   <!-- Map MODAL-->
            <div class="modal fade" id="myModalmap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">coordinate </h4>
                  </div>
                  <div class="modal-body">
                     
                      
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
               
                  </div>
                </div>
              </div>
            </div>