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

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

问题说明

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

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

在这里插入图片描述

解决教程

先来分析下，

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
专栏目录
订阅专栏
微信小程序 - 超详细实现 ＜map＞ 地图组件上标记某个位置，利用您自定义的经纬度在地图上 “标记某一个地点“ 并且高亮显示（支持自定义高亮显示效果，详细示例源码教程稳定可靠运行）
王佳斌
08-19 4249
微信小程序map标点，微信小程序map如何进行标记位置，微信小程序根据经纬度在map组件上地图标记并高亮显示，微信小程序怎么在map地图组件上进行标记一个地点，微信小程序map组件地图标记某个地址，微信小程序如何在map组件上根据经纬度进行展示标记点，微信小程序在map上标记点后怎么高亮突出显示，微信小程序map自定义标记位置后怎么突出高亮显示在地图上，微信小程序map 地图组件定位并高亮显示某一个位置，如何在map上根据经纬度添加标记点(附源码)，微信小程序map地图组件如何实现添加标记点，引用 map
微信小程序之地图功能
热门推荐
crazy_jack
02-12 15万+
转载请注明出处：http://blog.csdn.net/crazy1235/article/details/55004841本篇blog主要介绍微信小程序中的地图模块相关功能。基本使用地图组件使用起来也很简单。.wxml<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{con
微信小程序自定义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组件标记点markers
前端小菜鸟也有人起的博客
08-18 974
微信小程序map组件标记点markers
手把手教你：在微信小程序中加载map并实现拖拽添加标记定位
最新发布
Jiaberrr的博客
09-17 616
本文将为大家详细介绍如何在微信小程序中加载map组件，并实现拖拽标记定位功能。
百度智能小程序地图组件 map 使用的一些问题，地图 ios 下不显示的问题，获取当前精确的位置的问题，，，
cvper's world !
10-15 1982
本次说明的问题存在于最新的版本中  v-1.13.4 中，随着版本的更新，有些问题可能会被解决掉；   第一个问题： 某些情况下， ios 系统中，小程序的地图组件不会显示； 详细描述：   这个问题仅仅存在于iOS中，地图组件如果在DOM 结构的偏前面的位置，会显示出来，                      但是在DOM 结构的偏后位置加入地图组件，地图不会显示出来，也就是说，尽量...
微信小程序map组件，地图加载后marker标记点ios设备不显示，android正常显示
qq_36158551的博客
12-19 1559
微信小程序使用map组件，获取当前位置，地图渲染后，在当前位置附近添加标记点，使用marker添加多个标记点。android设备能正常显示标记点图标，IOS设备不显示标记点图标。
微信小程序map地图Marker过多优化
蓝色之恋love的博客
04-22 781
map地图能拿到当前地图显示范围和缩放比例，根据当前显示范围排除掉范围之外的marker,再根据缩放比例控制每个marker在一定的范围内只出现1个markers，来控制当前显示区域内marker过多的问题。
微信小程序地图添加marker
zzzzzzzi111的博客
07-08 2706
微信小程序地图添加marker
微信小程序原生＜map＞地图实现标记多个位置以及map 组件 callout 自定义气泡
IT博客技术分享
03-16 2519
自定义气泡为什么出不来呢？主要注意以下问题：首先这里的 customCallout 是作为一个属性存在的，那么自然要在 WXML 中有所体现，主要体现在 markers 对象中的数据结构。
微信小程序map组件动态markers
03-29
使用wepy框架，请求回来的数据设置给data里面初始化的markers，使用wx：if在拿到数据后渲染map组件，模拟器上没问题，真机上map组件渲染不出来   本主题由 Rolan 于 2018-10-12 14:17 审核通过       (此图片来源于网络，如有侵权，请联系删除! )       (此图片来源于网络，如有侵权，请联系删除! ) 免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
微信小程序之地图功能（map）
03-29
基本使用 地图组件使用起来也很简单。 .wxml <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" circles="{{circles}}" bindregionchange="regionchange" show-location style="w
小程序使用地图插件marker属性中的气泡框在ios中无法正常显示
qq_45547674的博客
12-29 1114
这段代码在ios系统中无法正常显示！ markers.splice(1, 1, { iconPath: '/static/dangqian.png', id: 1, title: '当前位置', width, height, latitude: this.data.nowNavigation.latitude, longitude: this.data.nowNavigation.longitud
微信小程序使用高德地图（amap）实现检索定位附近周边的POI功能示例
2301_76327109的博客
04-06 1451
今天关于面试的分享就到这里，还是那句话，有些东西你不仅要懂，而且要能够很好地表达出来，能够让面试官认可你的理解，例如Handler机制，这个是面试必问之题。有些晦涩的点，或许它只活在面试当中，实际工作当中你压根不会用到它，但是你要知道它是什么东西。最后在这里小编分享一份自己收录整理上述技术体系图相关的几十套腾讯、头条、阿里、美团等公司2021年的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。还有。
求助：为什么map组件自定义图标在模拟器显示正常，真机显示混乱？
weixin_44863190的博客
05-18 305
如图，点击导航栏，地图上的图标切换 点击景点（首页显示）： 点击教学楼： 显示正常。 而在真机上显示，如下图： 点击景点（首页显示）： 点击教学楼： 代码如下： <map scale="{{buildlData[isSelectedBuildType].scale}}" markers="{{buildlData[isSelectedBuildType].data}}" bindmarkertap="markertap" bindregionchange="regionchange" show
微信小程序Map地图使用详细教程，获取小程序定位，设置初始位置，设置地图初始缩放程度scale，最大，最小min-scale缩放，地图标点markers，画区域轮廓polygons，绑定地图点击事件
m0_67755668的博客
08-12 2190
核心： latitude，longitude表示当前显示的位置坐标，bindtap绑定地图的点击事件，bindregionchange监听地图视野变化，bindpoitap点击地图poi点时触发（处理点击地图上的某些图标或者轮廓线不触发点击事件问题），enable-zoom是否支持缩放，scale缩放等级（3~20），min-scale 、max-scale最小最大缩放等级，markers地图标点集合，polygons地图上画范围（轮廓）的集合
微信小程序 map 自定义地图数据，实现方式+思路+代码（最简易的实现方式）
飞奔的屎壳郎
10-28 7537
先上效果图，总的来说就是在地图上加上自己需要的数据 注意事项： requestSimple是我封装的提交函数，我的其他帖子有。 重点掌握.（重点） 1.官方map组件，提供了自定义标记（markers）的方式。详细去看下文档https://developers.weixin.qq.com/miniprogram/dev/component/map.html 2.一个点就是一个标记，多个点就是 m...
微信小程序map组件 markers 展示当前位置&&修改标记点图标
江咏之
07-22 6624
当前位置展示： <view> <map id="myMap" show-location class="container" style="width: 100%; height: 800rpx;" /> </view> onShow: function() { this.mapCtx = wx.createMapContext('myMap') this.mapCtx.moveToLocation() } 改个标记点的默认样式： 方法一 <view
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

街尾杂货店&

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

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

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

打赏作者

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

抵扣说明：

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

余额充值