uniapp 微信小程序 map marker图标不显示，点击图标进行切换，动态设置scale，ios图标不显示的处理，根据地图缩放层级展示不同数据

最新推荐文章于 2025-04-07 20:17:43 发布
最新推荐文章于 2025-04-07 20:17:43 发布
阅读量1.5k 收藏 6
点赞数 5
CC 4.0 BY-SA版权
文章标签： 前端 vue.js css3 微信小程序 ios android uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_66991255/article/details/141460309

记录一下工作遇到的问题

这次的需求是在微信小程序上的地图展示marker，同时点击marker图标把marker放大。同时缩放地图可以展示不同的marker数据

先上效果图

数据不能泄露，稍微打码

首先是动态设置scale缩放层级的问题

uniapp的map或者说是微信的map，没有scale变动的事件监听

要实现这个功能只能另辟捷径

官方有 regionchange 这个事件

地图拖动就会触发。其实用这个事件也可以来监听scale的变化。因为小程序我们是双指缩放的地图，因此这个事件每次都能触发

我们先来获取地图的上下文mapContext 

第一个参数是地图的id，字符串的形式，第二个参数是vue的this实例对象

我用的是vue3，没有this了，但是我们可以用别的方式代替

最低0.47元/天 解锁文章

200万优质内容无限畅学
uniapp：在map地图组件上添加控件，在地图上添加浮层展示自定义按钮或元素，uniApp如何在Map组件地图上添加悬浮在上面的图标/图片（全平台兼容安卓苹果app、H5网页、微信小程序、nvue）
高级前端工程师
06-29 2644
uni-app的map添加控件问题，uniapp实现地图展示控件，uniapp小程序如何在map组件上增加按钮，uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，Uniapp腾讯地图添加控件，uniapp百度地图添加控件，地图上展示控件并可以点击，在地图上展示控件信息，uniapp map地图怎么向地图上增加工具栏，使用cover-view将控件在地图上展示，解决uniapp map上添加浮层无法显示问题，不显示怎么办，css样式不生效，地图等最高层
【愚公系列】《微信小程序与云开发从入门到实践》021-map(地图)组件及应用
热门推荐
时光隧道
09-08 6万+
在现代应用开发中，地图功能的实现已成为提升用户体验的重要一环。作为一款流行的应用框架，微信小程序提供了强大的地图组件（map），使开发者能够轻松地集成地图功能，展示地理位置信息，并实现丰富的交互体验。无论是定位用户位置、搜索附近商家，还是规划行程路线，地图组件都能为用户提供更直观的服务。本篇文章将深入解析微信小程序的地图组件，包括其基本用法、配置项、以及如何在实际项目中灵活应用。我们将通过实例演示，帮助你理解地图组件的各种功能，如标记点、绘制路线、获取用户当前位置等，确保你能够掌握地图组件的使用技巧。
微信小程序：动态获取的markers不显示问题
Crazy_GirlLL的博客
12-12 1941
这是获取markers的接口，数据也获取到了，微信开发工具也获取到了并且显示了，，但是手机预览模式看不到，只能看到原本markers在没获取之前data中的假数据，但是，但是，用真机调试就可以看到了，，而且很奇怪的一点是，除了底层地图，手机和微信开发工具都能显示，微信开发工具可以看到比如上图的那个蓝色的点，手机就看不到，手机能看到的多边形和红色的点，微信开发者工具就看不到，不太清楚什么原因 ...
uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示
dccose的博客
04-10 6316
uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示
【UniApp踩坑记录】在subNvue页面中使用Map，添加marker后不显示
Alan_Walker688的博客
05-11 2763
uniapp subNvue页面中使用 map 后发现 marker 不显示的问题及解决
uniapp map地图显示图标markers问题，自定义图标不显示
web13985085406的博客
03-11 8647
自己记录一下uniapp开发小程序关于map地图问题 <map style="width:750rpx; height:100vh;" scale="17" show-location="true" :latitude="latitude" :longitude="longitude" :markers="markers"></map> 1 . 自定义图标不显示 data() { return { title: 'map', longitude:'122.1
uniapp地图的marker图标不显示问题
m0_51290484的博客
02-14 1459
uniapp地图的marker图标不显示问题
使用Java绘制图片边框，解决微信小程序map组件中marker与label层级关系问题，label增加外边框后显示不能置与marker上面
番茄Salad
11-13 805
今天上线的时候发现系统不同显示好像不一样，苹果手机打开的时候是正常的，但是一旦用安卓手机打开就会出现label不置顶的情况。尝试了很多种办法，也在官方查看了，发现并没有给label设置zIndex的属性，只看到了一个叫什么碰撞类型的属性，但是这个东西设置了如果两个目标有接触就会被隐藏掉，并不是我们想要的结果。想了一下，如果我们不使用label生成边框呢，直接在服务器那边把图片绘制成有边框的不就好了，这样子只用marker就行了，就能得到iOS的效果了。
微信小程序_文档_08_组件_媒体组件_地图_画布_开放能力
pre_eminent的JAVA学习园地
06-02 1208
audio注意：1.6.0 版本开始，该组件不再维护。建议使用能力更强的 wx.createInnerAudioContext 接口音频。属性名类型默认值说明idString audio 组件的唯一标识符srcString 要播放音频的资源地址loopBooleanfalse是否循环播放controlsBooleanfalse是否显示默认控件posterString 默认控件上的音频封面的图片资源...
uniapp运行到微信小程序地图不显示
weixin_55166890的博客
07-23 526
hbuilder用uniapp写的高德地图运行到微信小程序不显示，在manifest.json源码视图中加上"requiredPrivateInfos": ["getLocation"]。"appid" : "微信开发者工具appid","desc" : "获取定位"/* 小程序特有相关 */
uniapp地图基本使用及解决添加markers不生效问题？
Smile_ping的博客
11-28 3565
uniapp地图基于 nvue 实现添加 markers、气泡、查看地理位置、定位到当前位置的基本使用。
解决uni-app map地图显示图标markers问题（初学记录）
m0_74265954的博客
05-14 2659
在uni-app中引入地图需要提前在腾讯地图或者高德地图申请API，网上有很多教程官网给出的效果：然而我按照官网的步骤写了之后只有地图没有图标没改之前的代码：（我这里的经纬度是从云端传过来的）
uni-app中，map组件marker图标在手机端第二次进入不显示问题
m0_51420354的博客
06-20 1745
uni-app中，map地图组件图标不显示
微信小程序map组件，地图加载后marker标记点ios设备不显示，android正常显示
qq_36158551的博客
12-19 1862
微信小程序使用map组件，获取当前位置，地图渲染后，在当前位置附近添加标记点，使用marker添加多个标记点。android设备能正常显示标记点图标，IOS设备不显示标记点图标。
uniapp nvue map中刚踩到的坑 解决markers和polyline不显示
うさぎの喫茶店
04-14 1万+
uniapp真是个神奇的框架，文档上明明写着marker，polyline中的部分属性在nvue中支持，结果，别说marker的属性了，marker都没了 解决 还是来看看怎么解决的 这是开始时不能显示marker的代码 <map class="my-map" id="my-map" :style="{ height: mapHeight }" :latitude="latitude...
解决 uni-app 地图 markers iconPath 路径引入的图片，打包app后，看不见图标，相对/绝对路径都不成 问题
Half of if的博客
04-20 1万+
目前有两种解决方案： 解决方式第一种：将地图组件后缀改用nvue，父页面后缀也要改成nvue，如果只单独改子组件后缀，打包之后引入图片还是看不见 解决方式第二种：不用将文件（map.vue）后缀改为nvue，只需要在manifest.json加入此参数，然后打包也能正常显示自定义图标图片 效果展示： ...
uniapp微信小程序地图marker自定义气泡 customCallout偶尔显示不全解决办法
最新发布
艾路菲尔博客
04-07 1022
这个天坑问题，在微信开发工具上是不会显示出来的,只有在真机上才会偶尔出现随机样式偏移/裁剪/宽长宽偏移，询问社区也只是让你提交代码片段，并无解决办法。一开始我怀疑是地图组件加载出现了问题，于是给地图加了一个v-if="reLoad"默认值false,等页面加载完成再渲染地图。但是，通过重载地图的方式在地图上有逻辑时改动会相当麻烦，而且也不好判断该在什么时候重载。只要在首次赋值后给一个延时清空并重新赋值就能解决显示变形的问题。
小程序map开发工具显示makers,真机不显示makers
TO_Web的博客
06-04 1523
微信小程序中 使用腾讯地图开发工具中显示makers,但是真机不显示makers 1.场景: 搜索周边POI,然后显示出来 我处理这个问题的时候, 主要想到两步: 1.检查在makers中的图标路径对不对, 基本上这个都是正确的 2.就是没有配置合法域名: 把 https://apis.map.qq.com 添加到request合法域名列表中, 然后回到开发工具中清除一下缓存再刷新一下, 预览就应该可以了,我到这步就可以显示了,不知道大家有没有遇到别的情况,可以讨论一下 PS:我在小程序中用高德地图接口的
uniapp官方提供的map组件使用问题
呆呆papa的博客
11-14 6897
1、地图SDK的选择 博主在使用uniapp开发地图功能之前，使用过百度地图的SDK开发web地图功能。在最初的开发上希望能够使用百度地图的SDK，但是uniapp在接入地图功能时和web端开发还是有很大区别的，uniapp提供了一个地图组件<map>，因为产品只涉及到APP端，这里使用的是高德地图的SDK（这也是官方的推荐） 注：在真机调试时，APP端的<map>组件使用的就是高德地图，配置其他的SDK会在打包后使用 2、不同页面文件选择 使用uniapp进行APP开发时，可以选择
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值