Javascript leaftlet贴图不会在modal上重新加载新坐标

我创建了一个应用程序，它将在一个表中显示一些数据，在表中有一个按钮，用于显示使用modal_引导显示的该行数据的详细信息。 以下图片来自表格视图，每行带有模式按钮： 以下是modal_引导视图的图片： 在modal_引导中，我在选项卡中显示地图

问题是每次我关闭模式并尝试打开其他数据上的模式时，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>

var lat；
瓦隆；
var base_url=''；
$（文档）.ready（函数（）{
$（“#rj表”）.DataTable({
“ajax”：{
url:“”，
键入：“获取”
},
});
});
功能视图\详细信息（id）{
//Ajax从Ajax加载数据
$.ajax({
url:“/”+id，
键入：“获取”，
数据类型：“JSON”，
成功：功能（数据）{
$（'#modal_form'）.modal（'show'）；//完全加载时显示引导模式
显示选项卡（）；
纬度=数据纬度；
lon=数据。经度；
$（'#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.tahumpembuatan）；
$（'thr'）.html（data.th_akhir_renov）；
$（“#照片预览”）.show（）；//显示照片预览模式
if（data.photo）{
$（“#标签照片”）.text（'Change photo'）；//标签照片上传
$（'#tes'）.html（''）//显示照片
}
否则{
$（“#标签照片”）.text（'Upload photo'）；//标签照片上传
$（#照片预览分区'）。文本（“（无照片”）；
}
显示地图（纬度、经度）；
},
错误：函数（jqXHR、textStatus、errorshown）{
警报（“从ajax获取数据时出错”）；
}
});
}
功能显示图（横向、纵向）{
//---地图------
var mymap=newl.map（'mapid'）；
$（'#myTab'）.on（'show.bs.tab'，函数（e）{
mymap.invalidateSize（）；
});
mymap.setView（[lat，lon]，13）；
L.tileLayer（'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？访问令牌=pk.eyj1ijoicmlndw4ilcjhijoi2pydzy4zjyxmdhwzzq0btfnbxdlge2nyj9.5GY9VdDlGJwr1FUWveAqpA'{
maxZoom:18，
属性：“地图数据©；贡献者，”+，“+”图像©、，
id:“地图盒。街道”
}).addTo（mymap）；
L.标记（[lat，lon]）。添加到（mymap）；
var popup=L.popup（）；
函数onMapClick（e）{
弹出窗口
.setLatLng（即latlng）
.setContent（“您在“+e.latlng.toString（）处单击了地图”）
.openOn（mymap）；
}
mymap.on（'click'，onmaclick）；
//---------脚本映射--------
}
//----模态选项卡----
函数show_tab（）{
$（“#myTab a”）。单击（函数（e）{
e、 预防默认值（）；
$（this.tab（'show'）；
});
$（函数（）{
$（'#myTab a:first'）.tab（'show'）；
});
}
//----模态上的结束选项卡----

我已经得到了答案

解决办法是：

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

在ajax成功函数中：

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

document.getElementById（'pre_map'）。innerHTML=“”；

其余数据是否正确？我认为这是正确的，因为我试图通过在模式中显示来检查每个数据的坐标值，结果是每行数据都有不同的坐标看起来就像每次向容器添加新映射一样，所以检查是否有异常“映射已初始化”？