最近在使用Vue AMap組件時(shí)遇到了一些問(wèn)題。在將地圖顯示在頁(yè)面上后，出現(xiàn)了一些奇怪的錯(cuò)誤。首先，我的地圖上無(wú)法顯示POI點(diǎn)，而且我發(fā)現(xiàn)當(dāng)我重新設(shè)置地圖的中心點(diǎn)時(shí)，我的地圖不會(huì)重新加載，導(dǎo)致我無(wú)法看到新的地圖中心點(diǎn)。

我開(kāi)始檢查我的代碼，認(rèn)為問(wèn)題可能出現(xiàn)在我的Vue組件中。然后我發(fā)現(xiàn)我的Vue組件的生命周期函數(shù)沒(méi)有被正確地調(diào)用。我思考了很久，最終我發(fā)現(xiàn)這是由于Vue AMap的bug造成的。當(dāng)我在不同的Vue組件之間切換時(shí)，Vue AMap無(wú)法正確地重新加載地圖，導(dǎo)致我的地圖無(wú)法正常顯示。

mounted() {
this.$nextTick(() => {
// 初始化高德地圖
if (this.map == null) {
this.map = new AMap.Map(this.$refs.mapContainer, {
zoom: 12, // 縮放級(jí)別
center: [120.141653, 30.257821], // 中心點(diǎn)坐標(biāo)
resizeEnable: true // 是否監(jiān)控地圖容器尺寸變化
});
}
this.map.setCenter([120.141653, 30.257821]);
});
}

解決這個(gè)問(wèn)題的方法是要在Vue組件中對(duì)Vue AMap進(jìn)行手動(dòng)銷(xiāo)毀，并等待Vue AMap重新初始化。以下是我用來(lái)解決這個(gè)問(wèn)題的代碼片段：

beforeRouteLeave(to, from, next) {
if (this.map) {
this.map.destroy();
this.map = null;
}
next();
}

這段代碼將在Vue路由從一個(gè)組件切換到另一個(gè)組件時(shí)被調(diào)用。在此之前，我先銷(xiāo)毀了Vue AMap地圖對(duì)象，然后在下一個(gè)頁(yè)面中重新加載它。通過(guò)這種方式，我成功地解決了Vue AMap的bug，并且我的地圖現(xiàn)在可以正常顯示了。