uni-app使用高德地图转跳页面滚动后报错 Error: Invalid Object: Pixel(NaN, NaN)

发布于 1周前 作者 h691938207 来自 Uni-App

uni-app使用高德地图转跳页面滚动后报错 Error: Invalid Object: Pixel(NaN, NaN) 在当前页面直接使用高德地图，标记、弹层、滚动都没问题。

如图：

但是，如果在当前地图页面，转跳到另外页面，【滚动页面就会报错】

如图：

Uncaught Error: Invalid Object: Pixel(NaN, NaN)

找了好几个相关问题的解决方案，最后这个解决了问题：

【将下面3D，改成2D】

map = new AMap.Map("container", {
// 设置地图容器id
viewMode: "2D", // 是否为3D地图模式
zoom: 11, // 初始化地图级别
center: [latitude,longitude], //初始化地图中心点位置
});

Harmonyos Next教程
1 回复

在uni-app中使用高德地图时遇到页面滚动后报错“Error: Invalid Object: Pixel(NaN, NaN)”通常是由于地图组件在页面滚动后无法正确获取到正确的像素坐标导致的。这种情况往往与地图组件的定位和页面布局有关。下面提供一个可能的解决方案，通过确保地图组件在页面渲染完成后能正确获取到所需的位置信息。

解决方案

  1. 确保地图组件在DOM中正确渲染： 在uni-app中，可以利用onReady或mounted生命周期钩子来确保DOM元素已经渲染完成。

  2. 监听页面滚动事件并更新地图位置： 当页面滚动时，需要重新计算地图组件的位置，并更新地图的视口。这可以通过监听页面的滚动事件来实现。

代码示例

<template>
  <view class="container">
    <scroll-view scroll-y="true" @scroll="onScroll">
      <view class="content">
        <!-- 其他内容 -->
        <view class="map-container">
          <map id="myMap" :longitude="longitude" :latitude="latitude" style="width: 100%; height: 300px;"></map>
        </view>
        <!-- 更多内容 -->
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      longitude: 116.397428,
      latitude: 39.90923
    };
  },
  onReady() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = uni.createMapContext('myMap');
      // 初始化地图（例如设置中心点等）
      map.moveToLocation();
    },
    onScroll(e) {
      // 这里可以添加逻辑来根据滚动位置调整地图视图，但通常不需要直接操作
      // 因为高德地图SDK应该能够处理视口变化。如果确实需要，可以考虑重新计算地图容器位置。
      console.log('Scroll event:', e);
    }
  }
};
</script>

<style>
.container {
  height: 100vh;
}
.content {
  padding: 20px;
}
.map-container {
  width: 100%;
  height: 300px; /* 固定高度，确保地图容器大小稳定 */
}
</style>

注意

  • 上述代码示例中，onScroll方法仅用于监听滚动事件，并未直接操作地图。通常，高德地图组件应当能够自适应视口变化。
  • 如果问题依旧存在，可能需要检查地图组件的其他配置，如是否设置了正确的longitude和latitude，或者是否有其他CSS样式影响了地图容器的布局。
  • 确保高德地图的SDK版本与uni-app兼容，必要时更新至最新版本。
回到顶部