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

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

问题说明

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

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

在这里插入图片描述

解决教程

先来分析下，

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
微信小程序自定义map组件标记点markers（兼容苹果和安卓）
竹叶轻拂水
05-11 1万+
先来看实现效果图（uniapp实现，代码在下面） 在图片中我们看到标记点有以下需求： 1、标记点是自定义的，并不是微信默认 2、标记点的自定义icon有四种形式 3、数字是动态的 4、数字颜色有两种形式 1、自定义标记点 2、自定义标记点icon（marker属性下使用） 3、动态数字（marker属性下使用） 数字动态展示使用marker的callout和label都可以，但是在苹果手机不显示label，在安卓手机上callout定位无效，所以在使用的时候用wx.getSystemInfo获取
小程序使用地图插件marker属性中的气泡框在ios中无法正常显示
qq_45547674的博客
12-29 1053
这段代码在ios系统中无法正常显示！ markers.splice(1, 1, { iconPath: '/static/dangqian.png', id: 1, title: '当前位置', width, height, latitude: this.data.nowNavigation.latitude, longitude: this.data.nowNavigation.longitud
微信小程序map组件，地图加载后marker标记点ios设备不显示，android正常显示
qq_36158551的博客
12-19 1161
微信小程序使用map组件，获取当前位置，地图渲染后，在当前位置附近添加标记点，使用marker添加多个标记点。android设备能正常显示标记点图标，IOS设备不显示标记点图标。
关于微信小程序marker在ios端不显示的bug
zzzzzzzi111的博客
11-13 359
通过 uni.createMapContext("isMap", this).addMarkers 方法在地图上添加marker的话，在ios端就会出现无法显示的情况。所以要通过在map组件上绑定marker数组的方式，来在地图上添加marker。这样就能解决marker在ios端不显示的bug。
微信小程序-MAP API&组件 合集
violetta521的博客
02-07 651
微信小程序关于map地图
云未然的博客
10-23 841
微信小程序的map地图一直存在很多的问题，截止到目前为止我遇到的问题， 当前基础库版本:2.3.0， 1.ios和安卓在marker大小不一致；设置同样大小，ios上要小 2.getScale在ios返回的是小数，在安卓则是整数；也就是说你如果要针对scale做文章，需要根据系统去适配，同一部手机，安卓上面同一个scale对应的是一个放大缩小的视野范围，ios上是固定的范围，因为它通过get...
Android小程序定位偏差,微信小程序 腾讯地图显示偏差问题解决
weixin_29789925的博客
05-27 1504
背景在小程序中使用map组件，可以调用腾讯地图的API，将一些固定的点标记到地图界面上，点的经纬度获取是通过android端百度地图API获取的，所以此时将这个位置点信息直接设置上去会出现偏差，而且偏差还比较大小程序设置位置点关于如何在map组件上设置位置点，详细请查看腾讯官方文档首先看一下map组件：其markers是需要设置在地图界面的位置点数组，数组中的元素就是一个对象。markers: [...
小程序map组件markers数据改变后Android系统依然显示问题
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
02-08 1879
问题描述：改变markers数据后，地图点的icon依然存在原icon问题 真机预览和真机调试正常，开发者工具调试正常，上传到体验版安卓异常，发布后线上版本安卓异常，ios正常 。 解决方式： <map :enable-3D="true" id="myMap" :markers="positionlist" ></map> onReady: function (e) { // 使用 wx.createMapContext 获取 ma...
微信小程序使用高德地图（amap）实现检索定位附近周边的POI功能示例
coldriversnow的专栏
12-08 1704
解压下载的文件得到 amap-wx.js ，在创建的项目中，新建一个名为 libs 目录，将 amap-wx.js 文件拷贝到 libs 的本地目录下。，在 "设置" → "开发设置" 中设置 request 合法域名，将。2、在高德开发平台下载微信小程序SDK，（这个必须设置，不然无法使用定位功能）3、微信小程序后台添加安全域名。
微信小程序map组件动态markers
03-29
使用wepy框架，请求回来的数据设置给data里面初始化的markers，使用wx：if在拿到数据后渲染map组件，模拟器上没问题，真机上map组件渲染不出来   本主题由 Rolan 于 2018-10-12 14:17 审核通过       (此图片...
腾讯地图、微信小程序、轨迹、路线图、marker标记点
05-27
本项目涉及的是利用腾讯地图服务在微信小程序中实现轨迹和路线图的展示，以及使用marker标记点来突出特定位置。以下是相关知识点的详细说明： 1. **腾讯地图API**：腾讯地图提供了一系列的JavaScript API，可以用于...
微信小程序—map地图实现标记多个位置（导入即可用）
05-26
本教程将详细讲解如何在微信小程序中使用`map`组件实现这一功能，同时提供了可以直接导入使用的代码示例。 首先，我们需要引入微信小程序的地图组件。在`index.wxml`文件中，添加以下代码来创建一个`map`组件： ``...
微信小程序之callout自定义气泡
03-29
一脚下去差点没从坑里爬起来，然后由于某个原因，去研究了 微信小程序里面地图 callout 这个属性 callout呢，是在标记的点上面显示 一个 气泡，作为提示用 最后展示下 效果 可以展示 顶部气泡以及监听被点击 (此...
微信小程序-地图map.rar
09-27
通过使用这个标签，开发者可以将地图集成到小程序的页面中，并且可以进行一系列自定义设置，如缩放级别、中心点坐标、地图样式等。下面我们将详细探讨微信小程序中的地图API和相关知识点： 1. **地图组件（<map>）*...
微信小程序 - 自定义计数器
觉醒法师的专栏
08-02 1235
微信小程序通过自定义组件，实现计数器值的增加、减少、清零、最大最小值限定、禁用等操作。通过按钮事件触发方式，更新计数器的值，并修改相关联的其它变量。通过提升用户体验，对计数器进行优化设计，使用户操作更加便捷和直观。
Java灵活用工兼职全职报价单微信小程序+APP+微信公众号源码
2401_84413757的博客
08-05 348
在这个快节奏的时代，灵活用工已成为趋势。而一款好的报价单工具，就是你高效管理、赢得市场的得力助手！💪 无论是APP还是微信小程序，都能完美满足你的需求，让报价工作变得轻松又高效。
微信小程序 - 自定义计数器 - 优化(键盘输入校验)
觉醒法师的专栏
08-05 679
微信小程序通过自定义组件，实现计数器值的增加、减少、清零、最大最小值限定、禁用等操作。通过按钮事件触发方式，更新计数器的值，并修改相关联的其它变量。通过提升用户体验，对计数器进行优化设计，使用户操作更加便捷和直观。该篇将讲述一下中间input输入框值变化后的校验操作。
分享一个基于微信小程序的旅游自助拼团系统（源码、调试、LW、开题、PPT）
最新发布
m0_72599287的博客
08-05 861
随着移动互联网和智能手机的普及，旅游行业的数字化转型成为必然趋势。微信小程序作为一种便捷高效的应用形态，得到了广泛应用和用户认可。基于微信小程序的旅游自助拼团系统，旨在通过整合用户、旅行社和管理员的需求，提供一个高效、便捷、安全的旅游拼团服务平台，提升用户旅游体验，促进旅行社业务增长，同时实现管理员对系统的全面管理，优化资源配置，满足现代旅游市场的多样化需求。
uni-app微信小程序地图标记点
11-27
uni-app是一款基于Vue.js框架的跨平台开发工具，可以同时开发微信小程序、H5、App等多个平台的应用。在uni-app中，我们可以很方便地使用地图组件来标记点。 首先，我们需要引入uni-app官方提供的地图组件，在页面的json文件中添加以下代码： ``` { "usingComponents": { "uni-map": "@dcloudio/uni-map/uni-map" } } ``` 然后，在需要使用地图的页面中，在template中添加以下代码： ``` <template> <view> <uni-map :longitude="longitude" :latitude="latitude" :markers="markers" :include-points="true" ></uni-map> </view> </template> ``` 在script中，我们需要定义地图的经纬度和标记点的数据： ``` <script> export default { data() { return { longitude: 113.324520, latitude: 23.099994, markers: [{ id: 1, longitude: 113.324520, latitude: 23.099994, title: '标记点1', iconPath: '/static/marker.png', width: 30, height: 30 }, { id: 2, longitude: 113.326520, latitude: 23.099994, title: '标记点2', iconPath: '/static/marker.png', width: 30, height: 30 }] } } } </script> ``` 我们可以通过设置longitude和latitude来指定地图的中心点，通过markers来设置标记点的位置、标题、图标等信息。iconPath需要提前准备好对应的图标文件。 最后，在地图组件上设置:include-points="true"，可以使得地图自动包含所有标记点，确保能够显示所有标记点。 以上就是使用uni-app来在微信小程序中标记点的方法。通过引入uni-app提供的地图组件，结合相关的属性和数据即可实现地图的标记点功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

街尾杂货店&

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

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

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

打赏作者

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

抵扣说明：

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

余额充值