javascript - map 容器正在被另一个实例重用

Question

我想做的是在 map 初始化后，当我选择城市时，我有带有城市名称的菜单， map 应该放大那个城市。

预期结果:在页面开始后，每次我选择城市时， map 都会在中间初始化， map 会放大到那个城市。实际结果 map 从中间开始(在开始时初始化)，当我选择第一个城市时， map 会毫无问题地放大。当我尝试选择另一个城市时，出现此错误(leaflet.js:5 Uncaught Error: Map container is被另一个实例重用 在 i.remove (leaflet.js:5)...)

我尝试了很多东西:在我使用 map.remove() 之前我在没有任何操作的情况下收到此错误( map 容器已初始化。)。我还在 map.remove() 之前尝试了 map.off() ，试图在再次使用之前从容器中删除 map 。我试过谷歌搜索，但一点运气都没有。任何帮助将不胜感激。

new Vue({
    el: '#app',
    data: {
        /* Data properties will go here */
        map: null,
        tileLayer: null,
        loading: true,
        errored: false,
        xxx: [],
        selectedValue: null,
        marker: null,
        geocoder: null,
    },

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

        axios
            .get('URL ')
            .then(response => (this.xxx= response.data)).catch(function(error) {
                // handle error
                console.log("////error///");
                console.log(error);
                this.errored = true;
            }).finally(() => this.loading = false);


          this.xxx.forEach(function(item) {
            console.log("entered");
            L.marker(this.item.location.gps.coordinates).addTo(this.map).bindPopup(this.item.car_model).openPopup();;
            console.log("entered down");
            console.log(car);
        });

    },

    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.map.remove();


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

            this.geocoder.geocode().text(this.selectedValue).run(function(error, response) {

                if (error) {

                    return;
                }

                this.map = L.map(map);
                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);

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

            });

            console.log(this.selectedValue);
        }
    },

});```

Answer 1

看来您只需要更改现有 map 的边界:

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

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

重要的是，我已经将 run 的回调函数更改为使用箭头函数。这确保了 this 值仍然是对函数内 Vue 组件的引用。