当前位置: 首页 > 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.markersthis.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>

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

http://www.lryc.cn/news/537147.html

相关文章:

  • LabVIEW软件需求开发文档参考
  • MYSQL批量UPDATE的两种方式
  • 【Viper】配置格式与支持的数据源与go案例
  • C++17 中的 std::reduce:详细教程
  • 解决 paddle ocr 遇到 CXXABI_1.3.13 not found 的问题
  • 探索 Text-to-SQL 技术:从自然语言到数据库查询的桥梁
  • mac搭建环境
  • 算法学习笔记之贪心算法
  • Docker 镜像标签使用
  • STM32之SG90舵机控制
  • VSCode Error Lens插件介绍(代码静态检查与提示工具)(vscode插件)
  • list_for_each_entry_safe 简介
  • 微软AutoGen高级功能——Memory
  • 【鸿蒙开发】第三十六章 状态管理 - V1V2混用和迁移指导
  • 轮子项目--消息队列的实现(3)
  • 一文深入了解DeepSeek-R1:模型架构
  • 秘密信息嵌入到RGB通道的方式:分段嵌or完整嵌入各通道
  • Ai人工智能的未来:趋势、挑战与机遇
  • 理解WebGPU 中的 GPUDevice :与 GPU 交互的核心接口
  • Java 设计模式之桥接模式
  • 机器学习(李宏毅)——GAN
  • QT无弹窗运行和只允许运行一个exe
  • C++ STL 容器
  • 开源赋能,智造未来:Odoo+工业物联网,解锁智能工厂新范式——以真实案例解读制造业数字化转型的降本增效密码
  • CTF-WEB: 利用iframe标签利用xss,waf过滤后再转换漏洞-- N1ctf Junior display
  • K8s组件
  • python面试题
  • AOS安装及操作演示
  • 蓝桥杯单片机组第十三届初赛试题-程序题(第2批)
  • 企业级高可用 Kubernetes 实践:基于青云 LB 搭建容灾与负载均衡集群全攻略