传递数据 id 以引导模式并使用它 iframe url

Passing data-id to bootstrap modal and use it iframe url

本文关键字：url iframe 模式 数据 id      更新时间：2023-09-26

我正在尝试在引导模式中显示地图。 我有包含位置链接的记录列表。 单击位置时，它将在模态窗口中显示地图位置。 我成功地将值传递给模态窗口。 但无法在 iframe SRC 链接中使用。 下面是我的代码。

<a href="#myMapModal" class="btn fblack" data-toggle="modal" data-id="<?=$row['lat']?>,<?=$row['lng']?>">Location on Map</a>

和我的j查询

<script>
$('#myMapModal').on('show.bs.modal', function (e) {
    var location = $(e.relatedTarget).attr('data-id');
    $(this).find('#latlng').text(location);
});
</script>

我正在尝试将返回值放在 URL 中

<iframe width="570" height="300" frameborder="0" style="border:0;" src="https://www.google.com/maps/embed/v1/place?q=#latlng&amp;key=xxxxxxxxxxx"></iframe>

我给了q=#latlng

我可以使用<div id="latlng"></div>打印

但我无法在 URL 中使用。

使用此脚本，了解有关 google API 的更多信息

  <script>
    $(function(){
    $('#myMapModal').$('.bs-example-modal-lg').on('show.bs.modal', function (e) {
    var location = $(e.relatedTarget).attr('data-id');
       var newUrl = 'https://www.google.com/maps/embed/v1/view?key=1234&center='+location;
        console.log(newUrl);
      $(this).find('iframe').attr('src',newUrl);
     });
    });
    </script>

我做了什么来让它工作。

<script>
$('#myMapModal').on('show.bs.modal', function (e) {
    var location = $(e.relatedTarget).attr('data-id');
        $.ajax({
            type : 'post',
            url : 'map-list.php', //Here you will fetch records 
            data :  'rowid='+ location, //Pass $id
            success : function(data){
            $('#fetched-data').html(data);//Show fetched data from database
            }
        });
});
</script>

在地图上列表上.php

 <?php
    //Include database connection
    if($_POST['rowid']) {
        $eveid = $_POST['rowid']; //escape string
        ?>
        <iframe width="570" height="300" frameborder="0" style="border:0;" src="https://www.google.com/maps/embed/v1/place?q=<?=$eveid?>&amp;key=AIzaSyCoqMKgHRLWPQAwjGq0dzRhSg6e4UlrgE4"></iframe> 
    <?      
 }
?>

在模态体中

<div id="fetched-data"></div>
相关文章：