如何使用 php 和 jquery 在 google map 中動態添加經緯度？

Question

我正在嘗試使用 php 或 jquery 將緯度和經度值加載到下面的谷歌地圖鏈接中，但找不到這樣做的方法。

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

我在引導模式中創建了一個 static google map 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> 

Answer 2

可以在PHP中使用這行代碼：

$lat = 10.29692;
$long = 123.89778;
                            
echo "
<iframe 
    src='https://maps.google.com/maps?q=".$lat.",".$long."&hl=es;z=14&output=embed'
    frameborder='0' 
    style='border:0'
>
</iframe>";