Javascript 使用marker.remove（）清除并再次添加标记

我的目标：我想从地图上删除标记，并使用setinterval（）重新绘制它以更新地图上的位置

预期结果：删除标记并每4秒重新绘制一次

实际结果：旧的标记不会被移除，新的标记会一次又一次地添加到上面

错误消息：没有要包含的错误消息

我尝试检查marker是否为null，如果为null则从映射中删除marker（this.marker.remove（）），我尝试了this.marker.removeLayer（this.map）。在所有标记上循环并逐个删除，或者将标记设置为null。没有任何效果。下面我将包括代码。我很乐意得到任何帮助。提前谢谢

``新Vue({ el:“#应用程序”， 数据：{ /*数据属性将放在这里*/ map:null， tileLayer:null， 错误：错误， xxx:[]， selectedValue:null， 标记：空， 地理编码器：空， },

setInterval（this.getData，4000）

}，
方法：{
/*任何特定于应用程序的功能都可以在此处使用*/
initMap（）{
this.map=L.map（'map'{
中间：[20.0,5.0]，
minZoom:2，
缩放：2
});
this.tileLayer=L.tileLayer(
'https://cartodb-basemaps-{s} .global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}.png'{
maxZoom:18，
属性：'©；，©；'，
子域：['a'，'b'，'c']
}
);
this.tillelayer.addTo（this.map）；
},
onChange（事件）{
this.selectedValue=event.target.options[event.target.options.selectedIndex].text；
this.geocoder=L.esri.geocodeing.geocodeService（）；
this.geocoder.geocode（）.text（this.selectedValue）.run（（错误，响应）=>{
如果（错误）{
返回；
}
this.map.fitBounds（response.results[0].bounds）；
});
},
getData（）{
axios
.get（'url'）
.then（response=>{this.xxx=response.data}）.catch（error=>{
//处理错误
console.log（“///ErroR//”）；
console.log（错误）；
this.errored=true；
});
setTimeout（这个.drawMarker，500）；
},
drawMarker（）{
如果（此标记）{
console.log（this.marker）；
this.marker.remove（）；
}
对于（var i=0；i

---

}))```

可能是

这个
上下文范围问题：

setTimeout（this.drawMarker.bind（this），500）

另见

这是一个典型的JavaScript错误

这在JavaScript中不一定指类实例对象。它是函数被调用时的上下文

非常感谢您的回答，但不幸的是，我尝试过，但这不是问题：（您是否需要将get data方法中的settimeout调用移动到then块内？可能是您正在尝试在axios调用返回之前重新绘制。您可以在调用settimeout进行双重检查之前，console.log this.xxx的值。您在
this.xxx
中输入的数据长度是多少？您是否尝试过
marker.removeFrom（map）
？如果要使用
removeLayer
请键入：
map.removeLayer（marker）
computed: {

    onlyUnique() {

        return [...new Set(this.xxx.map((city => city.location.name)))];
    }

},

mounted() {
    /* Code to run when app is mounted */ // when the Vue app is booted up, this is run automatically.
    this.initMap();
  this.getData();     

},

methods: {
    /* Any app-specific functions go here */
    initMap() {

        this.map = L.map('map', {
            center: [20.0, 5.0],
            minZoom: 2,
            zoom: 2
        });
        this.tileLayer = L.tileLayer(
            'https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager/{z}/{x}/{y}.png', {
                maxZoom: 18,
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>',
                subdomains: ['a', 'b', 'c']
            }
        );
        this.tileLayer.addTo(this.map);

    },

    onChange(event) {


        this.selectedValue = event.target.options[event.target.options.selectedIndex].text;
        this.geocoder = L.esri.Geocoding.geocodeService();

        this.geocoder.geocode().text(this.selectedValue).run((error, response) => {
            if (error) {
                return;
            }

            this.map.fitBounds(response.results[0].bounds);
        });

    },
    getData(){

      axios
        .get('url')
        .then(response => {this.xxx= response.data}).catch( error =>{
            // handle error
            console.log("//////ErroR//////");
            console.log(error);
            this.errored = true;
        });

        setTimeout (this.drawMarker,500);
    },
   drawMarker(){
     if (this.marker) {
               console.log(this.marker);
               this.marker.remove();
     }

     for (var i = 0; i < this.xxx.length; i++) {

     this.marker = new L.marker([this.xxx[i].location.gps.coordinates[1],this.xxx[i].location.gps.coordinates[0]])
    .bindPopup("hello")
    .addTo(this.map);

     }

    }
},