使用 marker.remove() 清除并再次添加标记

Question

我的目标：我想从地图中删除标记并使用 setinterval() 重新绘制它以更新地图上的位置。

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

实际结果：旧标记没有被删除，新标记被一遍又一遍地添加。

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

我尝试检查标记是否不为空，如果不为空则从地图中删除标记 (this.marker.remove()) 我尝试了 this.marker.removeLayer(this.map) 。遍历所有标记并将其一一删除或将标记设置为 null .nothing working 。在这里我将包括代码。我很乐意提供任何帮助。在此先感谢。

``新的Vue（{ 埃尔：'#app'， 数据： { /* 数据属性会放在这里 */ 地图：空， 瓦片层：空， 错误：错误， xxx: [], 选定值：空， 标记：空， 地理编码器：空， },

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();     

setInterval(this.getData,4000);

},

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);

     }

    }
},

});```

Answer 1

可能是this 上下文范围问题：

setTimeout (this.drawMarker.bind(this), 500)

另见Leaflet- marker click event works fine but methods of the class are undefined in the callback function

这是一个典型的 JavaScript 错误。

this 在 JavaScript 中不一定引用您的类实例对象。它是函数调用时的上下文。