当前位置: 首页 > news >正文

微信小程序地图标记点,安卓手机一次性渲染不出来的问题

问题描述:

如果微信小程序端,渲染的标记物太多,安卓手机存在标记物不显示的问题,原因初步判断是地图还没有渲染完,标记物数据已经加载完了,导致没有在地图上显示。

解决办法:

使用map组件的bindupdated="onUpdated"方法监听地图渲染完成,这个时候,再去渲染标记物,而且还得多次渲染,如果覆盖物图片多了,一次还不够。所以我遍历了5次

// 监听地图渲染完成
    onUpdated(e) {
        console.log('onRegionChange', e)
        for (let i = 0; i < 5; i++) {
            this.timer = setTimeout(() => {
                let markers = this.data.markers
                this.setData({
                    coverMarkers: markers
                });
            }, 1000 * i)
        }
    },

但是,千万注意,map上的标记物变量,不要自定义标记物变量使用同一个,否则你每次更新【自定义标记物变量】,就会导致onUpdated再次被触发,进入死循环,所以,这两个字段,虽然值一样,但是要分成两个,例如:

data: {
        markers: [],//地图标记
        coverMarkers: [],//覆盖物标记
        currentLocation: {
            latitude: '',
            longitude: ''
        },
        scale: 16  // 添加缩放级别
    },

最后,地图标记坐标+自定义标记物:

<map id="map" 
            longitude="{{currentLocation.longitude}}" 
            latitude="{{currentLocation.latitude}}" 
            scale="{{scale}}"
            markers="{{markers}}" 
            show-location 
            bindupdated="onUpdated"
            bindcallouttap="handleCalloutTap" 
            style="width: 100%; height: 300px;">
            <view slot="callout">
                <cover-view wx:for="{{coverMarkers}}" wx:key="id">
                <cover-view class="marker-container" marker-id="{{item.id}}" wx:if="{{item.customCallout}}">
                    <cover-view class="customCallout" style="background: {{item.bgColor}}">
                        <map-callout marker="{{item}}"/>
                    </cover-view>
                </cover-view>
            </cover-view>
            </view>
        </map>

这是我总结的解决办法,如果你有好的解决方法,辛苦告诉我一下

相关文章:

  • node.js下载、安装、设置国内镜像源(永久)(Windows11)
  • 【愚公系列】《Python网络爬虫从入门到精通》008-正则表达式基础
  • 服务器延迟给视频网站造成的影响
  • RAG科普文!检索增强生成的技术全景解析
  • 基于SSM+uniapp的购药小程序+LW示例参考
  • 元学习之孪生网络Siamese Network
  • Whisper+T5-translate实现python实时语音翻译
  • 【MySQL】高频 SQL 50 题(基础版)
  • 每日一题——矩阵最长递增路径
  • 算法-哈希表03-快乐数
  • Django ORM:外键字段的命名与查询机制解析
  • Linux进程调度
  • DeepSeek 开放平台无法充值使用 改用其他中转平台API调用DeepSeek-chat模型方法
  • 变电站激光驱鸟器:绿色技术助力电网安全,减少鸟类威胁
  • C# 异步编程Async/Await 原理及使用详解
  • 【2023 K8s CKA】云原生K8s管理员认证课-零基础 考题更新免费学-全新PSI考试系统
  • Git子模块实战:大型后台管理系统模块拆分实践
  • elementUI rules 判断 el-cascader控件修改值未生效
  • Qt中QApplication 类和uic、moc程序
  • Node.js调用DeepSeek Api 实现本地智能聊天的简单应用
  • 做网站去哪里可以找高清的图片/网络营销推广方案策划
  • 做app的模板下载网站有哪些/如何优化企业网站
  • 网站内容建设招标/成都百度推广电话号码是多少
  • 仅有网站做app/微信怎么推广找客源
  • 专门做美妆的网站/重庆网
  • 自己做网站开发/百度广告投诉电话客服24小时