微信小程序 - 详细解决map地图上使用自定义图标图片或自定义样式进行markers标记点，手机真机运行时安卓系统、苹果ios系统会出现不显示标记点的问题（大概率安卓正常显示标记点，但苹果就加载失败）

已于 2025-01-15 16:51:42 修改
阅读量5.3k 收藏 5
点赞数 5
分类专栏： 前端组件与功能(开箱即用) 前端常见问题解决 文章标签： 微信小程序 在map地图标记点 动态标点 markers图标不显示不报错 安卓手机苹果ios运行不显示 页面白屏不显示标记点无法加载 就苹果ios系统不显示标记点 小程序Map地图详细标记点兼容
于 2024-08-06 10:04:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_50545213/article/details/140945476
版权

问题说明

在微信小程序项目开发中，详解使用Map地图组件时，利用markers在地图上标记 “自定义DOM容器样式/图片/图标/复杂html” 时，使用苹果IOS手机真机调试时发现markers标点并没有加载显示，但是安卓android手机却没有问题正常显示（但要注意都不是绝对的，有的时候安卓系统手机同样也会出现不显示的问题），解决各种在map组件地图中标记点时出现的白屏、不报错也不显示、苹果IOS设备不显示标记点图片图标、安卓设备不显示标记点图片图标、同时渲染大量标记点，大概率出现在动态markers标记，本博客提供兼容苹果和安卓设备的详细示例代码通通解决！

其他教程都无法解决，在本文你只要类似的错误就可以100%完美解决。

在这里插入图片描述

解决教程

先来分析下，

了解本专栏 订阅专栏 解锁全文
微信小程序 - 超详细实现 ＜map＞ 地图组件上标记某个位置，利用您自定义的经纬度在地图上 “标记某一个地点“ 并且高亮显示（支持自定义高亮显示效果，详细示例源码教程稳定可靠运行）
王二红
08-19 4493
微信小程序map标点，微信小程序map如何进行标记位置，微信小程序根据经纬度在map组件上地图标记并高亮显示，微信小程序怎么在map地图组件上进行标记一个地点，微信小程序map组件地图标记某个地址，微信小程序如何在map组件上根据经纬度进行展示标记点，微信小程序在map上标记点后怎么高亮突出显示，微信小程序map自定义标记位置后怎么突出高亮显示在地图上，微信小程序map地图组件定位并高亮显示某一个位置，如何在map上根据经纬度添加标记点(附源码)，微信小程序map地图组件如何实现添加标记点，引用map
uniapp - 详解使用高德地图在地图上实现绘制边界/点聚合/行政区域高亮等功能，Uniapp高德地图点聚合标记及绘制点线面示例代码（全端兼容H5网页、小程序、安卓app、苹果app、nvue）
高级前端工程师
01-05 1万+
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，高德地图，uniAPP高德地图实现点聚合，地图区域描边、点标记、点信息详情弹窗，实现绘制边界区域，uniapp H5使用高德地图实现点聚合、行政区域高亮，实现高德地图的marker聚合功能，高德地图进行marker标点，点信息展示，点击标记点弹出对话框，点击聚合点后显示信息模态框，打标点，【Uniapp】高德地图的接入自定义标点与信息窗体使用，绘制行政区域边界，绘制多边形，电子围栏，高德行政区划边界，
微信小程序map组件动态markers
03-29
使用wepy框架，请求回来的数据设置给data里面初始化的markers，使用wx：if在拿到数据后渲染map组件，模拟器上没问题，真机上map组件渲染不出来   本主题由 Rolan 于 2018-10-12 14:17 审核通过       (此图片来源于网络，如有侵权，请联系删除! )       (此图片来源于网络，如有侵权，请联系删除! ) 免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
微信小程序实例：map组件markers属性动态初始化
热门推荐
草灯的专栏
12-19 5万+
        今天在写小程序详情页时候遇到一个问题，map组件的markers属性是通过异步请求到数据后设置的，结果就导致了微信底层渲染出错。但是如果我先在data初始化markers变量，每次小程序都不能正常渲染都是初始化的北京的数据。然后写了如下测试：test.js：：Page({ data:{ map:{ lat: 0, lng: 0, ma...
微信小程序调用map地图进行渲染
最新发布
qq_52509186的博客
04-22 247
【代码】微信小程序调用map地图进行渲染。
微信小程序map组件marker自定义图标真机不显示
weixin_42056162的博客
12-05 784
使用网络路径不能包含中文，若有中文可以使用encodeURIComponent转换重新拼接网络地址即可。
微信小程序自定义map组件标记点markers（兼容苹果和安卓）
竹叶轻拂水
05-11 1万+
先来看实现效果图（uniapp实现，代码在下面） 在图片中我们看到标记点有以下需求： 1、标记点是自定义的，并不是微信默认 2、标记点的自定义icon有四种形式 3、数字是动态的 4、数字颜色有两种形式 1、自定义标记点 2、自定义标记点icon（marker属性下使用） 3、动态数字（marker属性下使用） 数字动态展示使用marker的callout和label都可以，但是在苹果手机不显示label，在安卓手机上callout定位无效，所以在使用的时候用wx.getSystemInfo获取
微信小程序map组件，地图加载后marker标记点ios设备不显示，android正常显示
qq_36158551的博客
12-19 1812
微信小程序使用map组件，获取当前位置，地图渲染后，在当前位置附近添加标记点，使用marker添加多个标记点。android设备能正常显示标记点图标，IOS设备不显示标记点图标。
微信小程序map组件markers标记点安卓、IOS显示适配问题和解决办法
2301_76760360的博客
12-25 712
在原生小程序的开发中，使用map组件中的markers标记点时会遇到一个问题：markers中有一个属性是label，用于显示标记点上的文字，但是label在安卓机器上能够正常的显示，在IOS的机器上则显示不出来，下面是解决办法。2.在IOS中，label属性无法正常显示，因此推荐使用callout属性，通过设置callout的display属性可以让文本点击显示或者常显。1.在安卓中，callout不能正常的设置它的位置，因此不推荐使用。想到达到同等的效果可以使用title属性。
uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示
dccose的博客
04-10 6154
uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示
微信小程序原生＜map＞地图实现标记多个位置以及map 组件 callout 自定义气泡
IT博客技术分享
03-16 3030
自定义气泡为什么出不来呢？主要注意以下问题：首先这里的 customCallout 是作为一个属性存在的，那么自然要在 WXML 中有所体现，主要体现在 markers 对象中的数据结构。
第一章总结
2402_83166968的博客
02-28 183
二、小程序应用场景的特点。
使用Java绘制图片边框，解决微信小程序map组件中marker与label层级关系问题，label增加外边框后显示不能置与marker上面
番茄Salad
11-13 782
今天上线的时候发现系统不同显示好像不一样，苹果手机打开的时候是正常的，但是一旦用安卓手机打开就会出现label不置顶的情况。尝试了很多种办法，也在官方查看了，发现并没有给label设置zIndex的属性，只看到了一个叫什么碰撞类型的属性，但是这个东西设置了如果两个目标有接触就会被隐藏掉，并不是我们想要的结果。想了一下，如果我们不使用label生成边框呢，直接在服务器那边把图片绘制成有边框的不就好了，这样子只用marker就行了，就能得到iOS的效果了。
微信小程序使用高德地图（amap）实现检索定位附近周边的POI功能示例
2301_76327109的博客
04-06 1615
今天关于面试的分享就到这里，还是那句话，有些东西你不仅要懂，而且要能够很好地表达出来，能够让面试官认可你的理解，例如Handler机制，这个是面试必问之题。有些晦涩的点，或许它只活在面试当中，实际工作当中你压根不会用到它，但是你要知道它是什么东西。最后在这里小编分享一份自己收录整理上述技术体系图相关的几十套腾讯、头条、阿里、美团等公司2021年的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。还有。
小程序：微信小程序中点击markers实现地图导航
mosowe
10-23 1万+
<map class='map' style='top:{{140 + topNav.height}}rpx' id="map" longitude="113.94829080193026" latitude="22.546096271173454" scale="14" markers="{{marke...
uniapp - 微信小程序实现腾讯地图位置标点展示，将指定地点进行标记选点并以一个图片图标展示出来（详细示例源码，一键复制开箱即用）
高级前端工程师
09-26 5776
uniapp腾讯地图，uniapp微信小程序端平台开发，uniapp地图指定位置标记标点，uniapp小程序平台地图如何标记位置高亮显示，uniapp小程序地图标点，uniapp微信小程序显示商家地图位置并且打上标志，uniapp小程序地图标记点覆盖物，uniapp小程序地图标点显示，uniapp小程序地图选点标记，uniapp微信小程序地图增加标记点，前端vue uniapp腾讯地图显示地图标记点，uniapp小程序高德地图的接入和自定义标点标记位置，uniapp微信小程序实现对地图多点或单点标记，uni
小程序自定义marker弹出框教程
renkai721的专栏
06-06 1709
小程序+腾讯地图开发marker，自定义弹出框。小程序动态显示marker
关于微信小程序marker在ios端不显示的bug
zzzzzzzi111的博客
11-13 646
通过 uni.createMapContext("isMap", this).addMarkers 方法在地图上添加marker的话，在ios端就会出现无法显示的情况。所以要通过在map组件上绑定marker数组的方式，来在地图上添加marker。这样就能解决marker在ios端不显示的bug。
微信小程序使用echarts地图自定义markPoint标点图标symbol
to_prototy的博客
02-29 1251
微信小程序使用echarts地图markPoint标点symbol属性不能使用自定义图标
vue 修改浏览器 滚动条的样式
01-13
### 修改 Vue 项目中的浏览器滚动条样式 #### 使用 CSS 自定义滚动条样式 对于现代浏览器，特别是基于 WebKit 的浏览器（如 Chrome、Edge、Safari 和 Opera），可以通过 `::-webkit-scrollbar` 伪类来自定义滚动条的各个部分。这使得能够完全控制滚动条的颜色、宽度和其他视觉属性。 ```css /* 整体滚动条 */ ::-webkit-scrollbar { width: 10px; } /* 滚动槽 */ ::-webkit-scrollbar-track { background-color: #f1f1f1; } /* 滚动条滑块 */ ::-webkit-scrollbar-thumb { background-color: darkgrey; border-radius: 10px; } ``` 此方法适用于大多数主流浏览器，但在 Firefox 中不生效，Firefox 需要使用不同的方式设置滚动条颜色[^2]。 #### 利用第三方库实现更复杂的自定义效果 为了获得更好的兼容性和更多的功能选项，在 Vue 项目中可以考虑集成专门处理滚动条样式的插件或组件。例如： - **vuescroll**: 提供了一个完整的 API 来管理页面内的滚动行为，并支持高度定制化的滚动条外观[^4]。 安装命令如下： ```bash npm install vuescroll@^4.17.0 ``` 之后可以在应用入口文件或其他合适位置全局注册该组件： ```javascript import Vue from 'vue'; import vuescroll from 'vuescroll'; Vue.use(vuescroll); ``` 这样就可以在整个应用程序范围内轻松地配置和调整滚动条的行为与风格了。 #### 应用场景下的具体实践 当面对特定的设计需求时，比如希望整个网站保持一致性的用户体验，则可能需要针对不同区域分别设定个性化的滚动条样式。此时不仅限于简单的样式更改，还可以通过编程手段动态改变这些参数，甚至响应用户的交互操作来增强互动感。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十一猫咪爱养鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值