我想做的是在 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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, © <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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, © <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);
}
},
});```
最佳答案
看来您只需要更改现有 map 的边界:
this.geocoder.geocode().text(this.selectedValue).run((error, response) => {
if (error) {
return;
}
this.map.fitBounds(response.results[0].bounds);
});
重要的是,我已经将 run
的回调函数更改为使用箭头函数。这确保了 this
值仍然是对函数内 Vue 组件的引用。
关于javascript - map 容器正在被另一个实例重用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58818435/