在公司介绍页面,使用地图展示公司地址,效果如图所示。一个蓝色的小标记图标会显示。但是第二次进入这个页面这个图标就没有展示了
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/fa530adb5713464f896335e641a0e2c2.png)
原因:Vue 3 组件中,地图标记在第一次进入页面时正常显示,但在切换路由并返回时不显示,可能是由于地图实例的重新初始化或销毁问题,解决办法如下:
import { onMounted, onUnmounted, ref } from "vue";
export default {
setup() {
let map = ref(null);
onMounted(() => {
map.value = new AMap.Map("mapContainer", {
center: [x, y],
zoom: 18,
});
const marker = new AMap.Marker({
position: new AMap.LngLat(x, y),
title: "标记点名称",
});
map.value.add(marker);
});
onUnmounted(() => {
if (map.value) {
map.value.destroy();
map.value = null;
}
});
return {
map,
};
},
};