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

于 2024-08-23 14:38:56 发布
阅读量465 收藏 5
点赞数 5
文章标签： 前端 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元/天 解锁文章
前端在线炒粉
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序自定义marker弹出框教程
renkai721的专栏
06-06 1088
小程序+腾讯地图开发marker，自定义弹出框。小程序动态显示marker
微信小程序 - 详细解决map地图上使用自定义图标图片或自定义样式进行markers标记点，手机真机运行时安卓系统、苹果ios系统会出现不显示标记点的问题（大概率安卓正常显示标记点，但苹果就加载失败）
高级前端工程师
08-06 4016
微信小程序，map，地图组件，安卓android，苹果ios，真机调试，marker，标记点，在地图上标记，突然就不显示白屏了没动代码，自定义标记点icon，label动态数字，小程序地图markers标记点显示不出来，微信小程序map组件，地图加载后marker标记点ios设备不显示，android正常显示，添加多个标记点。安卓能正常显示标记点图标，IOS设备不显示标记点图标，map地图白屏不显示标记，图标真机调试不显示，自定义图标，报错，页面白屏，不报错也不显示，无法加载，图片展示不出来，iconPat
微信小程序--map
嗅嗅匆匆的博客
02-24 515
//获取手机屏幕信息 wx.getSystemInfo({ success: function (res) { that.setData({ console.log(res.model) console.log(res.pixelRatio) console.log(res.windowWidth) con...
微信小程序map组件动态markers
03-29
使用wepy框架，请求回来的数据设置给data里面初始化的markers，使用wx：if在拿到数据后渲染map组件，模拟器上没问题，真机上map组件渲染不出来   本主题由 Rolan 于 2018-10-12 14:17 审核通过       (此图片来源于网络，如有侵权，请联系删除! )       (此图片来源于网络，如有侵权，请联系删除! ) 免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
uniapp中map组件不显示
weixin_68819649的博客
03-31 2447
map地图组件在H5端不显示，要去manifest.json中进行勾选配置，并且申请一个key。
微信小程序地图实现标记多个位置
算法与编程之美
10-30 7099
1 问题如何在微信小程序实现标记多个位置。2 方法1.在pages文件夹下新建image文件夹用来存放标记的图片。2.在map标签中添加markers属性。<map id="m...
微信小程序编写tabBar模板，map组件markers属性动态初始化
sinat_36947685的博客
02-07 7574
一：编写tabBar模板 众所周知，微信小程序的tabBar都是新开页面的，而微信文档上又表明了最多只能打开5层页面。这样就很容易导致出问题啦，假如我的tabBar有5个呢？下面是微信原话： 一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo 因此这几天想着根据微信tab
微信小程序map组件标记点markers
前端小菜鸟也有人起的博客
08-18 905
微信小程序map组件标记点markers
微信小程序地图(map)组件点击(tap)获取经纬度的方法
12-12
微信小程序中使用地图(map)组件，通过点击(tap)获取经纬度，按照官方的回应，暂时是没法做到的，从地图组件API多有残缺判断，怀疑是个实习生干的… 做个变通，适用性有限，请大家参考。基本思路就是在地图上铺满一层...
关于微信小程序map组件z-index的层级问题分析
12-02
说起微信小程序的map组件，可以说是良心之作了，一个组件解决了所以接入地图的所有麻烦，但是在实际小程序的试用过程中还是存在点问题的。 如下情景： 刚开始接入map组件的时候是在微信开发工具的模拟器上预览的，...
微信小程序之地图功能（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
微信小程序map组件 markers 展示当前位置&&修改标记点图标
江咏之
07-22 6275
当前位置展示： <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
微信小程序地图map的markers属性polyline属性controls属性全解析教程
coldriversnow的专栏
11-20 930
【代码】微信小程序地图map的markers属性polyline属性controls属性全解析教程。
微信小程序map组件点击不同的marker跳转到不同的页面
forceofnature的博客
06-30 1870
map.wxml页面 点击标记触发事件：bindmarkertap="marjertap" map.js页面 为每个marker设置id号 判断不同marker的id号是否满足条件：if(e.detail.markerId==id号)
微信小程序绘制marker
u014388322的专栏
07-05 977
小程序显示maker数据信息
微信小程序map组件marker自定义图标真机不显示
weixin_42056162的博客
12-05 506
使用网络路径不能包含中文，若有中文可以使用encodeURIComponent转换重新拼接网络地址即可。
微信小程序Map地图使用详细教程，获取小程序定位，设置初始位置，设置地图初始缩放程度scale，最大，最小min-scale缩放，地图标点markers，画区域轮廓polygons，绑定地图点击事件
最新发布
m0_67755668的博客
08-12 616
核心： latitude，longitude表示当前显示的位置坐标，bindtap绑定地图的点击事件，bindregionchange监听地图视野变化，bindpoitap点击地图poi点时触发（处理点击地图上的某些图标或者轮廓线不触发点击事件问题），enable-zoom是否支持缩放，scale缩放等级（3~20），min-scale 、max-scale最小最大缩放等级，markers地图标点集合，polygons地图上画范围（轮廓）的集合
微信小程序引入map组件并在地图上标点
蜗牛~~
10-11 1725
微信小程序引入地图组件并标点
uniapp微信小程序使用百度Map，实现地图显示、当前位置、围栏守护，代码实现
07-13
在使用 Uniapp 开发微信小程序中，可以通过百度地图 JavaScript API 来实现地图显示、获取当前位置以及围栏守护功能。下面是一个简单的代码实现示例： 首先，需要在 `script` 标签中引入百度地图 JavaScript API： ```html <script src="http://api.map.baidu.com/api?v=3.0&ak=your_baidu_map_ak"></script> ``` 然后，在页面的 `template` 中添加一个地图容器： ```html <template> <view class="map-container"> <map id="map" style="width: 100%; height: 100%;"></map> </view> </template> ``` 接下来，在页面的 `script` 中，可以编写相关的 JavaScript 代码来初始化地图、获取当前位置以及设置围栏守护。示例代码如下： ```javascript <script> export default { data() { return { map: null, fence: null } }, onReady() { // 初始化地图 this.map = new BMap.Map('map'); this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 获取当前位置 this.getCurrentLocation(); // 设置围栏守护 this.setFence(); }, methods: { getCurrentLocation() { let geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition((position) => { if (geolocation.getStatus() === BMAP_STATUS_SUCCESS) { let marker = new BMap.Marker(position.point); this.map.addOverlay(marker); this.map.panTo(position.point); } }); }, setFence() { let circle = new BMap.Circle(new BMap.Point(116.404, 39.915), 1000, { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 0.5, fillColor: 'blue', fillOpacity: 0.2 }); this.map.addOverlay(circle); this.fence = circle; } } }; </script> ``` 以上代码实现了在 Uniapp 微信小程序中使用百度地图 API 实现地图显示、获取当前位置和设置围栏守护的功能。需要注意的是，示例代码中的 `your_baidu_map_ak` 部分需要替换为你自己的百度地图 AK（Access Key）。 请注意，这只是一个简单的示例，具体的功能和样式可以根据实际需求进行修改和扩展。同时，使用百度地图 API 需要在百度开放平台申请对应的服务并获取 AK，确保 AK 的安全性和正确性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值