微信小程序map组件点击不同的marker跳转到不同的页面

已于 2022-04-08 21:37:53 修改
阅读量1.7k 收藏 9
点赞数 3
文章标签： 小程序
于 2021-06-30 10:52:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/forceofnature/article/details/118356124
版权

“wxml页面”

在map组件中添加触发事件：bindmarkertap="markertap"

“js页面”

在data中，为markers数组中的每个marker的id属性赋值

“js页面”

添加markertap函数，通过当前点击的marker的id号来判断是否跳转：if(e.detail.markerId==id号)

forceofnature
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
微信小程序map组件动态markers
03-29
使用wepy框架，请求回来的数据设置给data里面初始化的markers，使用wx：if在拿到数据后渲染map组件，模拟器上没问题，真机上map组件渲染不出来   本主题由 Rolan 于 2018-10-12 14:17 审核通过       (此图片来源于网络，如有侵权，请联系删除! )       (此图片来源于网络，如有侵权，请联系删除! ) 免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
微信小程序：点击按钮频繁切换，重叠自定义markers，但是值不改变
Crazy_GirlLL的博客
02-02 690
背景：点击切换右侧对应的实况要素,改变marker下面的实况信息(-22.9℃)，并且markers名字（尚志市）和实况信息（-22.9℃）并不是一个接口获取，此项目还使用了自定义的callout 自定义callout的例子在这：有需要自取https://blog.csdn.net/Crazy_GirlLL/article/details/113556336 结构如下 经大佬提示，自定义组件中的customMarkers虽然也是每次请求，但是里面的id是不变的，所以就会出现点击按钮，调取接口，..
小程序map组件的使用
Zhoulizhen_的博客
05-20 5125
做项目的过程中需要根据某一个坐标获取这个坐标附近的门店，使用到了map组件： 首先在选择门店的时候： 点击请选择安装门店，进入address.wxml文件中: address.js文件这样写： 首先在onReady(){}里面获取map上下文 然后在onload里面使用wx.getLocation()获取当时的经纬度，然后调取后台接口获得当时所在地的经纬度附近的门店列表，将获取的列表传入ma...
微信小程序避坑：地图上bindmarkertap事件在获取不到id值
weixin_46441103的博客
04-27 2139
最近在做微信小程序时，遇到的问题，分享记录下来： 因为升级了微信开发者工具，发现之前做的功能不起作用了，我在获取某个点的marker的id时，发现按以前的方式获取出来是这样的，或者就是undefined 经过查证，原因有如下几点，并附解决办法： 1.为了保证没问题，可以做双重判断，如果e.markerId没有值时，就用e.detail.markerId 2.切换到2.12以下版本，以上版本会有问题。 3.如果想用高版本，可用 1 的方式获取值。 注：在给marker赋值时，设置成numbe.
微信小程序解决view点击事件穿透地图map触发markertap
weixin_55109830的博客
10-18 6298
解决view点击事件穿透地图map触发markertap 点击能滑动的scroll-view反而不会触发底下的markertap，就等于是一个不穿透的容器。 用透明的可滑动的scroll-view放在上层作为隐形按钮，下次放普通的按钮样式，这回真正的解决了ios的bug。
微信小程序-如何点击marker触发事件更改图标icon
Bartender_VA11的博客
11-26 1974
点击marker，触发事件改变marker状态，更改marker图标的icon
微信小程序map组件markers使用遇到的bug及解决方法
weixin_44441827的博客
04-16 3070
问题出现背景 之前做过一个要map组件的小程序，要实现路线规划。通过点击不同的marker，规划处一条路径来，初始位置是用户的位置，终点由服务提供。然而现在出现了无法显示用户位置外markers的情况。 简化后代码片段 js代码： Page({ data: { markers:[] }, onLoad() { var that=this; wx.getLocation({ altitude:true, success:function(res){
微信小程序map组件触发bindmarkertap事件也会触发bindtap事件
qq_38519358的博客
06-16 4806
在使用微信小程序使用map组件开发时遇到了一个问题，应该是官网的bug，就是当添加marker标签后同时给地图
【小5聊】小程序之map组件bindmarkertap标记点点击事件无反应的原因
小5聊的博客
03-06 2367
【场景】 小程序标记点，点击无反应 【原因和解决方法】 直接在参数里添加上id即可
[微信小程序]在图片上的特定区域点击实现功能
wahzx的博客
09-26 1432
点击地图上的特定区域进行跳转或执行其他操作
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
10-17
主要介绍了微信小程序map组件结合高德地图API实现wx.chooseLocation功能,结合实例形式分析了map组件调用高德地图API接口获取地理位置提示列表并返回location相关操作技巧,需要的朋友可以参考下
微信小程序map组件
08-10
微信小程序实现map组件 微信开发者工具 微信小程序实现map组件 微信开发者工具
微信小程序使用map组件实现解析经纬度功能示例
01-03
本文实例讲述了微信小程序使用map组件实现解析经纬度功能。分享给大家供大家参考，具体如下： 声明 bug： 页脚的详细地址在真机测试是会出现不显示问题？ 造成原因：在小程序map组件的同一区域，map组件的视图层比...
微信小程序点击列表跳转到对应详情页过程解析
10-16
主要介绍了微信小程序点击列表跳转到对应详情页过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
陪诊小程序的市场潜力与发展趋势研究
最新发布
2402_83689311的博客
04-24 230
随着社会的快速发展和人口老龄化的加剧，医疗服务需求日益增长，而陪诊服务作为医疗服务的重要补充，正逐渐受到人们的关注和青睐。陪诊小程序利用互联网技术，将陪诊服务与用户需求紧密连接，提高了服务的便捷性和效率。他们往往需要更加细致的照顾和陪伴，而陪诊小程序能够提供专业的陪诊服务，满足老年人的需求。随着技术的不断创新和市场的不断拓展，陪诊小程序将在未来医疗服务领域发挥更加重要的作用，为人们的生活带来更多便利和舒适。通过拓展海外市场，引入国际先进的陪诊服务理念和模式，提升陪诊小程序的国际竞争力。
【免费源码下载】完美运营版商城 虚拟商品全功能商城 全能商城小程序 智慧商城系统 全品类百货商城php+uniapp
仿站、源码搭建/迁移技术博客
04-21 234
完美运营版商城/拼团/团购/秒杀/积分/砍价/实物商品/虚拟商品等全功能商城干干净净 没有一丝多余收据 还没过手其他站 还没乱七八走的广告和后门后台可以自由拖曳修改前端UI页面 还支持虚拟商品自动发货等功能 挺不错的一套源码前端UNIAPP 后端PHP 一键部署版本。
微信原生小程序封装用户登陆
qq_59626859的博客
04-18 384
open-type是小程序中button的属性之一，合法霍倩倩getUserInfo,引导用户授权，可以从bindgetuserinfo回调中获取到用户信息。button可以指定plain属性，完全去掉样式，跟view类似。后端在用户登陆后会返回resfreshToken和token；
【微信小程序从入门到精通（项目实战）】——微电影小程序
php优质创造者
04-18 2970
如果还要不懂运行不出效果可以私信博主
怎样快速打造二级分销小程序
lin13600956163的博客
04-21 419
乔拓云提供了两种分销模式供商家选择。在这里，商家可以看到乔拓云强大的分销功能，轻松选择适合自己的分销模式。商家可以在乔拓云的官方网站上了解到详细的费用一览表，根据自己的预算选择合适的版本进行使用。值得一提的是，商城开通分销功能后，不仅具备了一级分销商的功能，还支持一级分销商继续发展下级分销商，从而产生二级分销商。在这个过程中，商家可以根据自己的需求添加分销中心页面、设置分销规则等，实现个性化的分销策略。通过套用乔拓云提供的精美模板，商家无需具备专业的技术背景，也能轻松打造出功能齐全、美观大方的小程序。
点击微信小程序地图标点跳转页面
05-09
5. 在点击事件的处理函数中，使用微信提供的`wx.navigateTo`函数来跳转到指定页面。 下面是一个示例代码，可以帮助你实现这个功能： ```html <!-- 在小程序页面中添加地图组件 --> <map id="myMap" latitude="{{...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值