uni-app 使用renderjs版高德地图从地图页跳转至可滚动页面并发生滚动后报错Uncaught Error: Invalid Object: Pixel(NaN, NaN)

在处理uni-app中使用renderjs版高德地图从地图页跳转至可滚动页面并发生滚动后出现的Uncaught Error: Invalid Object: Pixel(NaN, NaN)错误时，通常是由于地图组件在页面切换或滚动过程中未能正确更新其尺寸或位置信息导致的。这种情况常见于地图组件在DOM结构中的位置发生变化时，地图对象未能及时感知并调整。

为了解决这个问题，我们可以通过在页面滚动或页面切换时手动触发地图的重绘或重新计算位置。以下是一个可能的解决方案示例，使用uni-app结合renderjs来管理高德地图对象，并在页面切换或滚动时更新地图状态。

示例代码

1. 引入高德地图SDK并初始化地图（在renderjs中）

// map.renderjs
import AMap from 'amap-js-api-render';
let mapInstance;

export function initMap(containerId) {
    AMap.plugin('AMap.MarkerClusterer', () => {
        mapInstance = new AMap.Map(containerId, {
            resizeEnable: true,
            // 其他地图配置
        });
        // 地图初始化代码
    });
}

export function resizeMap() {
    if (mapInstance) {
        mapInstance.resize();
    }
}

2. 在Vue组件中管理地图生命周期

<template>
    <view id="mapContainer" style="width: 100%; height: 100%;"></view>
</template>

<script>
export default {
    onReady() {
        // 初始化地图
        this.$refs.renderJs.initMap('mapContainer');
        
        // 监听页面滚动事件
        window.addEventListener('scroll', this.handleScroll);
    },
    beforeDestroy() {
        // 移除滚动事件监听
        window.removeEventListener('scroll', this.handleScroll);
    },
    methods: {
        handleScroll() {
            // 调用renderjs中的resizeMap方法
            this.$refs.renderJs.resizeMap();
        }
    },
    renderjs: {
        data() {
            return {
                renderJs: {
                    initMap: initMap,
                    resizeMap: resizeMap
                }
            };
        }
    }
};
</script>

说明

• initMap函数用于初始化高德地图实例，并设置其容器。
• resizeMap函数用于在地图容器尺寸变化时重新调整地图大小。
• 在Vue组件的onReady生命周期钩子中调用initMap初始化地图，并监听页面滚动事件。
• 在页面滚动时调用resizeMap以确保地图正确调整大小。
• 在组件销毁前移除滚动事件监听，避免内存泄漏。

通过这种方式，可以有效避免因页面切换或滚动导致的地图错误。