传单地图未在模态上重新加载新坐标[重复]

Question

我创建了一个应用程序，它将在表格中显示一些数据，在表格​​中有一个按钮来显示使用 modal_bootstrap 显示的那一行上的数据的详细信息。 表格视图中的以下图片，每行中都有模式按钮： 下面是modal_bootstrap视图的图片： 在 modal_bootstrap 上，我在选项卡中显示地图

问题是每次我关闭模态并尝试在其他数据上打开模态时，modal_bootstrap 上的传单地图仍然显示以前的地图，它应该根据打开的数据行调出地图坐标

这是我的代码

    <script type="text/javascript">
        var lat;
        var lon;
        var base_url = '<?php echo base_url();?>';

        $(document).ready(function() {
            $('#rj-table').DataTable({
                "ajax": {
                    url : "<?php echo site_url("main/rj_page") ?>",
                    type : 'GET'
                },
            });
        });

function view_detail(id){
        //Ajax Load data from ajax
        $.ajax({
            url : "<?php echo site_url('main/ajax_view')?>/" + id,
            type: "GET",
            dataType: "JSON",
            success: function(data){
                $('#modal_form').modal('show'); // show bootstrap modal when complete loaded
                show_tab();
                lat = data.latitude;
                lon = data.longitude;
                $('#idrj').html(data.idrumahjaga);
                $('#di').html(data.namaDI);
                $('#jupeng').html(data.namaJP);
                $('#nmrj').html(data.namarumahjaga);
                //$('#petugas').html(lng);
                $('#kec').html(data.kecamatan);
                $('#des').html(data.desa);
                $('#dus').html(data.dusun);
                $('#thp').html(data.tahunpembuatan);
                $('#thr').html(data.th_akhir_renov);

                $('#photo-preview').show(); // show photo preview modal
                if(data.photo){
                    $('#label-photo').text('Change Photo'); // label photo upload
                    $('#tes').html('<img src="'+base_url+'assets/img/'+data.photo+'" class="img-responsive">'); // show photo
                }
                else{
                    $('#label-photo').text('Upload Photo'); // label photo upload
                    $('#photo-preview div').text('(No photo)');
                }
                show_map(lat, lon);
            },
            error: function (jqXHR, textStatus, errorThrown){
                alert('Error get data from ajax');
            }
        });
    }
    function show_map(lat, lon){
        //---map------
        var mymap = new L.map('mapid');
        $('#myTab').on('shown.bs.tab', function (e){
            mymap.invalidateSize();
        });
        mymap.setView([lat, lon], 13);
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoicmlndW4iLCJhIjoiY2pydzY4ZjYxMDhwZzQ0bTFnbXdldGE2NyJ9.5GY9VdDlGJwr1FUWveAqpA', {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            id: 'mapbox.streets'
        }).addTo(mymap);
        L.marker([lat, lon]).addTo(mymap);
        var popup = L.popup();
        function onMapClick(e) {
            popup
            .setLatLng(e.latlng)
            .setContent("You clicked the map at " + e.latlng.toString())
            .openOn(mymap);
        }
        mymap.on('click', onMapClick);
        //---------script map--------
    }
    //---- tab on modal----
    function show_tab(){
        $('#myTab a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });
        $(function () {
            $('#myTab a:first').tab('show');
        });
    }
    //---- end tab on modal----
</script>

Answer 1

我已经得到答案here

解决办法是：

<div id="pre_map"></div>

在ajax成功函数中：

document.getElementById('pre_map').innerHTML = "<div id='mapid' style='width: relative; height: 500px;'></div>";