uni-app 移除marker之后再次添加marker不显示

在 Uni-App 中使用地图组件（如 map）时，如果你移除了 marker 之后再次添加 marker 但不显示，可能是由于以下几个原因导致的。以下是一些常见的排查步骤和解决方案：

1. 确保 markers 数据更新

• 在 Uni-App 中，map 组件的 markers 属性是通过数据绑定的方式控制的。如果你直接修改 markers 数组，但没有触发视图更新，可能会导致 marker 不显示。
• 解决方法：使用 this.$set 或直接重新赋值 markers 数组，确保视图更新。

// 假设 this.markers 是当前的 markers 数组
this.markers = []; // 清空 markers
this.$nextTick(() => {
    this.markers = newMarkers; // 重新添加新的 markers
});

2. 检查 marker 的经纬度

• 确保你添加的 marker 的 latitude 和 longitude 是有效的，且在地图的可视范围内。
• 如果经纬度无效或超出地图范围，marker 将不会显示。

const newMarkers = [
    {
        id: 1,
        latitude: 39.90923, // 有效的纬度
        longitude: 116.397428, // 有效的经度
        name: '标记点'
    }
];
this.markers = newMarkers;

3. 检查 map 组件的 include-points

• 如果你添加的 marker 不在当前地图的显示范围内，可能需要通过 include-points 属性动态调整地图的显示范围，以确保 marker 可见。

<map
    :markers="markers"
    :include-points="includePoints"
    style="width: 100%; height: 300px;">
</map>

this.includePoints = [
    {
        latitude: 39.90923,
        longitude: 116.397428
    }
];

4. 检查 marker 的 iconPath

• 如果你为 marker 指定了 iconPath，确保路径是正确的，并且图标文件存在。
• 如果 iconPath 无效，marker 可能不会显示。

const newMarkers = [
    {
        id: 1,
        latitude: 39.90923,
        longitude: 116.397428,
        iconPath: '/static/marker.png', // 确保路径正确
        name: '标记点'
    }
];
this.markers = newMarkers;

5. 确保 map 组件已加载完成

• 有时在 map 组件还未完全加载时添加 marker，可能会导致 marker 不显示。可以在 map 组件的 @ready 事件中确保地图加载完成后再添加 marker。

<map
    :markers="markers"
    @ready="onMapReady"
    style="width: 100%; height: 300px;">
</map>

methods: {
    onMapReady() {
        // 地图加载完成后添加 marker
        this.markers = newMarkers;
    }
}

6. 检查 map 组件的 id

• 如果你在同一个页面中有多个 map 组件，确保你操作的 map 组件的 id 是正确的。

7. 重新渲染地图

• 如果你尝试了以上方法仍然无法显示 marker，可以尝试通过重新渲染地图来解决问题。例如，通过 v-if 控制 map 组件的显示与隐藏，强制重新渲染。

<map
    v-if="mapVisible"
    :markers="markers"
    style="width: 100%; height: 300px;">
</map>

this.mapVisible = false;
this.$nextTick(() => {
    this.mapVisible = true;
});