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

ops/2025/2/15 11:55:12/

问题描述:

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

解决办法:

使用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.ppmy.cn/ops/158583.html

相关文章

DeepSeek4j 已开源,支持思维链,自定义参数,Spring Boot Starter 轻松集成,快速入门!建议收藏

DeepSeek4j Spring Boot Starter 快速入门 简介 DeepSeek4j 是一个专为 Spring Boot 设计的 AI 能力集成启动器&#xff0c;可快速接入 DeepSeek 大模型服务。通过简洁的配置和易用的 API&#xff0c;开发者可轻松实现对话交互功能。 环境要求 JDK 8Spring Boot 2.7Maven/Gr…

LeetCode《算法通关手册》 1.2 数组排序

Python强推&#xff1a;算法通关手册&#xff08;LeetCode&#xff09; | 算法通关手册&#xff08;LeetCode&#xff09; (itcharge.cn) 目录 文章目录 1.2 数组排序1.2.1 选择排序1.2.2 冒泡排序[283. 移动零 - 力扣&#xff08;LeetCode&#xff09;](https://leetcode.cn/p…

【网络安全 | 漏洞挖掘】跨子域账户合并导致的账户劫持与删除

未经许可,不得转载。 文章目录 概述正文漏洞成因概述 在对目标系统进行安全测试时,发现其运行着两个独立的域名——一个用于司机用户,一个用于开发者/企业用户。表面上看,这两个域名各自独立管理账户,但测试表明它们在处理电子邮件变更时存在严重的逻辑漏洞。该漏洞允许攻…

Xilinx kintex-7系列 FPGA支持PCIe 3.0 吗?

Xilinx kintex-7系列资源如下图 Xilinx各系列的GT资源类型和性能 PCIe Gen1/2/3的传输速率对比 K7上面使用的高速收发器GTX最高速率为12.5GT/s&#xff0c; PCIe Gen2 每个通道的传输速率为 5 GT/s。 PCIe Gen3 每个通道的传输速率为 8 GT/s。 所以理论上硬件支持PCIe3.0&#…

Python基于 Flask 创建简单Web服务并接收文件

在全部网口上创建web服务, 监听8080端口关闭debug模式GET时返回HTML界面, 用于提交文件POST到 /upload 时, 从接收的 file 变量中读取文件, 并传递给 opencv 解析为 image 对象 from flask import Flask, request, redirect, url_for import os import cv2 import numpy impor…

【LINUX】常用指令查询

目录 文件操作查看目录&#xff08;ls/ll&#xff09;进入目录&#xff08;cd&#xff09;创建目录&#xff08;mkdir&#xff09;移动操作&#xff08;mv&#xff09;删除操作&#xff08;rm&#xff09; 文件操作 查看目录&#xff08;ls/ll&#xff09; 查看当前目录下的所…

【Qt】:概述(下载安装、认识 QT Creator)

&#x1f308; 个人主页&#xff1a;Zfox_ &#x1f525; 系列专栏&#xff1a;Qt 目录 一&#xff1a;&#x1f525; 介绍 &#x1f98b; 什么是 QT&#x1f98b; QT 发展史&#x1f98b; Qt版本&#x1f98b; QT 优点 一&#xff1a;&#x1f525; 搭建Qt开发环境 &#x1f9…

科普:数据仓库中的“指标”和“维度”

在数据仓库中&#xff0c;指标和维度是两个核心概念&#xff0c;它们对于数据分析和业务决策至关重要。以下是对这两个概念的分析及举例说明&#xff1a; 一、指标 定义&#xff1a; 指标是用于衡量业务绩效的关键数据点&#xff0c;通常用于监控、分析和优化企业的运营状况。…