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

问题描述:

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

解决办法:

使用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.mzph.cn/bicheng/71028.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI前端开发的崛起与ScriptEcho的助力

近年来&#xff0c;人工智能&#xff08;AI&#xff09;技术飞速发展&#xff0c;深刻地改变着软件开发的格局。尤其是在前端开发领域&#xff0c;AI的应用越来越广泛&#xff0c;催生了对AI写代码工具的需求激增&#xff0c;也显著提升了相关人才的市场价值。然而&#xff0c;…

安装并配置 MySQL

MySQL 是世界上最流行的开源关系型数据库管理系统之一&#xff0c;因其高性能、可靠性和易用性而被广泛应用于各种规模的企业级应用中。本文将详细介绍如何在不同的操作系统上安装和配置 MySQL&#xff0c;帮助你快速搭建起一个功能完善的数据库环境。 选择适合你的安装方式 …

《探秘Windows 10驱动开发:从入门到实战》

《探秘Windows 10驱动开发:从入门到实战》 为什么要在 Windows 10 编写驱动程序 在当今数字化时代,计算机已成为人们生活和工作中不可或缺的工具 ,而 Windows 10 作为一款广泛使用的操作系统,其生态系统的丰富性和复杂性不言而喻。在这个庞大的体系中,驱动程序扮演着举足…

【prompt示例】智能客服+智能质检业务模版

本文原创作者&#xff1a;姚瑞南 AI-agent 大模型运营专家&#xff0c;先后任职于美团、猎聘等中大厂AI训练专家和智能运营专家岗&#xff1b;多年人工智能行业智能产品运营及大模型落地经验&#xff0c;拥有AI外呼方向国家专利与PMP项目管理证书。&#xff08;转载需经授权&am…

算法17(力扣217)存在重复元素

1、问题 给你一个整数数组 nums 。如果任一值在数组中出现 至少两次 &#xff0c;返回 true &#xff1b;如果数组中每个元素互不相同&#xff0c;返回 false 。 2、示例 &#xff08;1&#xff09; 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3,1] 输出&#xff1a;…

使用 ffmpeg 给视频批量加图片水印

背景 事情是这样的……前两天突然接到 leader 给的一个任务&#xff1a;给视频加上图片 logo 水印。我这种剪映老司机当然迷之一笑了哈哈哈哈哈&#xff0c;沉浸在简单的任务中还没反应过来巴掌就如洪水般涌来&#xff0c;因为 leader 给了几十个视频……作为一个计算机人&…

CSS 属性选择器详解与实战示例

CSS 属性选择器是 CSS 中非常强大且灵活的一类选择器&#xff0c;它能够根据 HTML 元素的属性和值来进行精准选中。在实际开发过程中&#xff0c;属性选择器不仅可以提高代码的可维护性&#xff0c;而且能够大大优化页面的样式控制。本文将结合菜鸟教程的示例&#xff0c;从基础…

基于SpringBoot和PostGIS的省域“地理难抵点(最纵深处)”检索及可视化实践

目录 前言 1、研究背景 2、研究意义 一、研究目标 1、“地理难抵点”的概念 二、“难抵点”空间检索实现 1、数据获取与处理 2、计算流程 3、难抵点计算 4、WebGIS可视化 三、成果展示 1、华东地区 2、华南地区 3、华中地区 4、华北地区 5、西北地区 6、西南地…

计算机毕业设计——Springboot的校园新闻网站

&#x1f4d8; 博主小档案&#xff1a; 花花&#xff0c;一名来自世界500强的资深程序猿&#xff0c;毕业于国内知名985高校。 &#x1f527; 技术专长&#xff1a; 花花在深度学习任务中展现出卓越的能力&#xff0c;包括但不限于java、python等技术。近年来&#xff0c;花花更…

PyCharm 批量替换

选择替换的内容 1. 打开全局替换窗口 有两种方式可以打开全局替换窗口&#xff1a; 快捷键方式&#xff1a; 在 Windows 或 Linux 系统下&#xff0c;按下 Ctrl Shift R。在 Mac 系统下&#xff0c;按下 Command Shift R。菜单操作方式&#xff1a;点击菜单栏中的 Edit&…

深度剖析责任链模式

一、责任链模式的本质&#xff1a;灵活可扩展的流水线处理 责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;是行为型设计模式的代表&#xff0c;其核心思想是将请求的发送者与接收者解耦&#xff0c;允许多个对象都有机会处理请求。这种模式完美解决了以下…

服务器使用centos7.9操作系统前需要做的准备工作

文章目录 前言1.操作记录 总结 前言 记录一下centos7.9操作系统的服务器在部署业务服务之前需要做的准备工作。 大家可以复制到自己的编辑器里面&#xff0c;有需求的注释一些步骤。 备注&#xff1a;有条件的项目推荐使用有长期支持的操作系统版本。 1.操作记录 # 更换阿里云…

Aitken 逐次线性插值

Aitken 逐次线性插值 用 Lagrange 插值多项式 L n ( x ) L_n(x) Ln​(x)计算函数近似值时&#xff0c;如需增加插值节点&#xff0c;那么原来算出的数据均不能利用&#xff0c;必须重新计算。为克服这个缺点&#xff0c;可用逐次线性插值方法求得高次插值。 令 I i 1 , i 2…

HARCT 2025 分论坛9:专用设备和机器人系统

会议名称&#xff1a;机电液一体化与先进机器人控制技术国际会议 会议简称&#xff1a;HARCT 2025 大会时间&#xff1a;2025年3月28日-30日 大会地点&#xff1a;中国桂林 主办单位&#xff1a;桂林航天工业学院、广西大学、桂林电子科技大学、桂林理工大学 协办单位&…

建筑兔零基础自学python记录18|实战人脸识别项目——视频检测07

本次要学视频检测&#xff0c;我们先回顾一下图片的人脸检测建筑兔零基础自学python记录16|实战人脸识别项目——人脸检测05-CSDN博客 我们先把上文中代码复制出来&#xff0c;保留红框的部分。 ​ 然后我们来看一下源代码&#xff1a; import cv2 as cvdef face_detect_demo(…

图书管理项目(spring boot + Vue)

想要该项目的话&#xff0c;就 jia 我&#xff0c;并在评论区给我说一下&#xff0c;只需要1元&#xff0c;我把整个项目发给你 jia微&#xff1a;18439421203&#xff08;名字叫&#xff1a;Bingo&#xff09; 运行图片&#xff1a;

Kubernetes 最佳实践:Top 10 常见 DevOps/SRE 面试问题及答案

1. 如何在 Kubernetes 中设置资源请求和限制&#xff1f; 资源请求确保容器有最小资源量&#xff08;CPU/内存&#xff09;&#xff0c;而限制则强制容器消耗的最大资源量。这有助于高效资源分配并防止资源争用。 示例&#xff1a; resources:requests:memory: "256Mi&…

java练习(19)

ps:练习来自力扣 给你一个整数数组 nums &#xff0c;其中元素已经按 升序 排列&#xff0c;请你将其转换为一棵 平衡 二叉搜索树。 // 定义二叉树节点类 class TreeNode {int val;TreeNode left;TreeNode right;TreeNode() {}TreeNode(int val) { this.val val; }TreeNode…

计算机考研复试上机05

目录 9、数学问题 1)进制转换 1.二进制数(北京邮电大学复试上机题) 2.进制转换(清华大学复试上机题) 3.十进制与二进制(清华大学复试上机题) 4.进制转换 2(清华大学复试上机题) 5.八进制(华中科技大学复试上机题) 6.又一版 A + B(浙江大学复试上机题) 7.…

LTSPICE仿真电路:(二十三)单端信号转差分信号的简单仿真

1.单端转差分 简单的可以用运放输出再加一个反向比例放大器即可&#xff0c;但是今天仿真一个其他的&#xff0c;在你好放大器上看到的电路。 2.电路图 仿真结果 交叉式单端转差分 优点&#xff1a;可以很明显看出来只需要用单电源就可以了&#xff0c;但是电容是不可缺少的…