uni-app tabbar页面中map地图在国外经纬度造成白屏

uni-app tabbar页面中map地图在国外经纬度造成白屏

产品分类：

uniapp/小程序/微信

PC开发环境操作系统：

Windows

PC开发环境操作系统版本号：

win10

HBuilderX类型：

正式

HBuilderX版本号：

3.2.9

第三方开发者工具版本号：

1.0.5.2109101

基础库版本号：

2.19.6

项目创建方式：

HBuilderX

示例代码：

-- 正常 --  
<map longitude="108.975277" latitude="22.97993"></map>  
-- 异常 --  
<map longitude="-87.6188114" latitude="41.8897136"></map>

操作步骤：

在tabbar页面创建地图 设置国外经纬度 在调整到其他不是tabbar的页面 最后回到tabbar中 对地图进行点击 出现白屏

预期结果：

测试结果 国内经纬度正常 国外异常

实际结果：

都能够正常显示

bug描述：

地图组件在tabbar中使用 切换到其他不是tabbar的页面在回到当前的页面对地图进行点击、移动操作造成地图白屏异常

测试数据正常 国内 longitude=“108.975277” latitude=“22.97993”

异常 国外 longitude="-87.6188114" latitude=“41.8897136”


更多关于uni-app tabbar页面中map地图在国外经纬度造成白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

视频地址
https://i.website.ehomie.com/%2F2021%2F9%2F1632989384258361.mp4?e=1948349389&token=mb4uIO8Acd3JdHSXdGiBvVoIkAoMD-PzJ70qTYdD:Hn1houPswx_kk9vDxrbM7yT4WTo=

更多关于uni-app tabbar页面中map地图在国外经纬度造成白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


视频中 第一个是地图国是在tabbar中进行的操作
第二个地图是在发布详情页 不是在tabbar页面
在发布页中对地图进行操作是没有问题 而在tabbar中进行页面切换 就切到了腾讯地图

再次更新反馈 在安卓机型下发生 iphone下没有问题 （安卓vivox2、 华为p30）

你好，你的地图支持显示国外的地方吗

支持的 按照微信小程序的逻辑是国内IP显示腾讯地图 国外用谷歌地图

这个问题是由于微信小程序地图组件在tabbar页面切换时的渲染机制导致的。当tabbar页面包含地图组件，切换到其他页面再返回时，如果地图坐标在国外，可能会触发白屏。

主要原因是微信小程序地图组件在tabbar页面切换时存在渲染优化问题，特别是对于国外坐标的地图瓦片加载可能存在异常。

解决方案：

  1. 使用v-if控制地图渲染 在tabbar页面的onShow和onHide生命周期中控制地图的显示：

    <map v-if="showMap" :longitude="longitude" :latitude="latitude"></map>

export default {
  data() {
    return {
      showMap: true
    }
  },
  onHide() {
    this.showMap = false
  },
  onShow() {
    this.showMap = true
  }
}

  2. 使用key强制重新渲染 给地图组件添加唯一的key，在页面显示时更新key值：

    <map :key="mapKey" :longitude="longitude" :latitude="latitude"></map>

export default {
  data() {
    return {
      mapKey: 0
    }
  },
  onShow() {
    this.mapKey = Date.now()
  }
}

  3. 延迟初始化地图 在onShow后延迟加载地图：

    <map v-if="mapLoaded" :longitude="longitude" :latitude="latitude"></map>

export default {
  data() {
    return {
      mapLoaded: false
    }
  },
  onShow() {
    this.mapLoaded = false
    setTimeout(() => {
      this.mapLoaded = true
    }, 100)
  },
  onHide() {
    this.mapLoaded = false
  }
}
回到顶部