Javascript 另一个实例正在重用映射容器

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

预期成果： 在页面开始后，在地图中间初始化，每次我选择城市，地图放大到那个城市。 实际结果 地图从中间开始（在开始时初始化），当我选择第一个城市时，地图没有问题地放大。当我尝试选择另一个城市时，我得到了这个错误（小叶。JS：5个错误：地图容器正在被另一个实例重用。 在i.remove（传单js:5）

我尝试了很多东西： 在使用map.remove（）之前 我得到了这个错误（映射容器已经初始化。），没有任何操作。 我还在map.remove（）之前尝试了map.off（），尝试在再次重用之前从容器中删除该映射。 我尝试了谷歌搜索，但一点运气都没有。任何帮助都将不胜感激

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

});```

newvue({
el:“#应用程序”，
数据：{
/*数据属性将放在这里*/
map:null，
tileLayer:null，
加载：对，
错误：错误，
xxx:[]，
selectedValue:null，
标记：空，
地理编码器：空，
},
计算：{
onlyUnique（）{
返回[…新集合（this.xxx.map（（city=>city.location.name））]；
}
},
安装的（）{
/*安装应用程序时要运行的代码*///启动Vue应用程序时，将自动运行此代码。
this.initMap（）；
axios
.get（'URL'）
.then（response=>（this.xxx=response.data））.catch（函数（错误）{
//处理错误
console.log（“/////错误//”）；
console.log（错误）；
this.errored=true；
}).最后（（）=>this.loading=false）；
this.xxx.forEach（函数（项）{
控制台日志（“输入”）；
L.marker（this.item.location.gps.coordinates）.addTo（this.map）.bindPopup（this.item.car_model）.openPopup（）；；
控制台日志（“记录”）；
控制台日志（car）；
});
},
方法：{
/*任何特定于应用程序的功能都可以在此处使用*/
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.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（函数（错误，响应）{
如果（错误）{
返回；
}
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，
属性：'©；，©；'，
子域：['a'，'b'，'c']
}
);
this.tillelayer.addTo（this.map）；
this.map.fitBounds（response.results[0].bounds）；
});
console.log（此.selectedValue）；
}
},
});```

似乎您只需要更改现有地图的边界：

this.geocoder.geocode（）.text（this.selectedValue）.run（（错误，响应）=>{
如果（错误）{
返回；
}
this.map.fitBounds（response.results[0].bounds）；
});

---

重要的是，我已将

run

的回调函数更改为使用箭头函数。这确保了

此
值仍将是函数中Vue组件的引用。
我不清楚您为什么试图在
onChange
中创建新映射。为什么不重用现有的映射？@skirtle我试过了，得到的错误消息是未捕获的TypeError:map.fitbunds不是一个function@skirtle我能再问你一个问题吗。这和这个无关，但我现在不能在stack overflow中问任何问题。从相同的代码中，我想向地图添加标记。您可以在代码中看到，我尝试使用foreach访问xxx数组以循环它，但我可以看到它不工作，因为xxx数组是空的。为什么它是空的，我用在计算函数omg中，就是这样。非常感谢你。我能问另一个问题吗@shirtle