Javascript 使用响应api重新加载标记google maps api

我想在谷歌地图api中添加新的标记。之后，它将转到

sweetalert

，然后重新加载页面以显示标记。使用

sweetalert

保存后，如何在不重新加载的情况下更新/显示标记

下面是来自响应api的脚本

//response from json, data existing
var exist = [{"name":"mysql",
              "geolocation":{
                  "lat":"88909090",
                  "long":"1010010"
             }}, 
             {"name":"golang",
              "geolocation":{
                  "lat":"86080080",
                  "long":"111000"
             }}] 

这是保存新标记后的脚本

$.ajax({
        url: "<?php echo base_url(); ?>qr/addmarker",
        type:"POST",
        dataType:"json",
        data:{
            "names":names,
            "lat":lat,
            "long":long
        },
        success: function(response){
            Swal.fire({
                title: 'Success',
                text: 'Pin has been moved',
                icon: 'success',
                timer: 2000,
                showConfirmButton: false
            }).then(function() {
                //console.log("string")
                document.location.reload();
                
            });
        }
    })

$.ajax({
url:“qr/addmarker”，
类型：“POST”，
数据类型：“json”，
数据：{
“名字”：名字，
“lat”：lat，
“长”：长
},
成功：功能（响应）{
喷火({
标题:"成功",，
文本：“Pin已移动”，
图标：“成功”，
计时器：2000，
showconfixton：false
}).然后（函数（）{
//console.log（“字符串”）
document.location.reload（）；
});
}
})

下面是在地图上显示标记的脚本

 for (var i = 0; i < exist.length; i++) 
 {
     var form_name = exist[i].names
     var lat = exist[i].geolocation.lat
     var long = exist[i].geolocation.long

     if(exist[i].geolocation.lat != null){
        marker = new google.maps.Marker({
                 position: new google.maps.LatLng(exist[i].geolocation.lat, exist[i].geolocation.long),
                 map: map
         });
         marker.setMap(map);
     }
 }

for（变量i=0；i

如果要创建一个简单的函数来添加标记，例如：

const addmarker=function( map, lat, long, name ){
    return new google.maps.Marker({
        position: new google.maps.LatLng(lat, long),
        name:name,
        title:name,
        map:map
     });
}

（由于不知道涉及的完整代码，我将

map

作为参数添加到函数中，但据我所知，这可能是一个全局变量，因此可能可以省略。）

然后，您可以在页面加载时最初使用该功能加载标记：

for( var i = 0; i < exist.length; i++ ) {
    if( exist[i].geolocation.lat != null ){
        var form_name = exist[i].names;
        var lat = exist[i].geolocation.lat;
        var long = exist[i].geolocation.long;
        
        addmarker(map, lat, long, form_name );
    }
}

for（变量i=0；i

在ajax函数的回调中：

$.ajax({
    url: "<?php echo base_url(); ?>qr/addmarker",
    type:"POST",
    dataType:"json",
    data:{
        "names":names,
        "lat":lat,
        "long":long
    },
    success: function(response){
        Swal.fire({
            title: 'Success',
            text: 'Pin has been moved',
            icon: 'success',
            timer: 2000,
            showConfirmButton: false
        }).then(function(){
        
            response.forEach(obj=>{
                addmarker( map, obj.geolocation.lat, obj.geolocation.long, obj.name );
            })
            
        });
    }
})

$.ajax({
url:“qr/addmarker”，
类型：“POST”，
数据类型：“json”，
数据：{
“名字”：名字，
“lat”：lat，
“长”：长
},
成功：功能（响应）{
喷火({
标题:"成功",，
文本：“Pin已移动”，
图标：“成功”，
计时器：2000，
showconfixton：false
}).然后（函数（）{
response.forEach（obj=>{
addmarker（map，obj.geolocation.lat，obj.geolocation.long，obj.name）；
})
});
}
})

---

上面的任何一项都无法测试，因此可能会出现小错误，但想法是可以的。

使用ajax函数中的回调添加新标记并删除

location.reload（）