小程序map组件的使用

做项目的过程中需要根据某一个坐标获取这个坐标附近的门店,使用到了map组件:
首先在选择门店的时候:
在这里插入图片描述
点击请选择安装门店,进入address.wxml文件中:
在这里插入图片描述
address.js文件这样写:
首先在onReady(){}里面获取map上下文
在这里插入图片描述
然后在onload里面使用wx.getLocation()获取当时的经纬度,然后调取后台接口获得当时所在地的经纬度附近的门店列表,将获取的列表传入map的markers中作为标记点:
在这里插入图片描述
上面的内容就是循环得到的门店列表,在地图上打点;
在这里插入图片描述
地图部分就是map组件的内容,下面的门店地址列表是自己写出来,以便选择门店,
在这里插入图片描述
选择门店列表时,是根据列表的index来选择的:
在这里插入图片描述
同样的点击地图的标记点,也要在列表中双向绑定,这个方法中,是根据map列表的id来选择的:
在这里插入图片描述

其中bindmarkertap参数返回的是点击markers的id,所以可以根据返回的id是否等于当时所点击的id来判断。
选择地图和列表解决完之后,就将选中的地址信息返回到上一页:
在这里插入图片描述
在这里插入图片描述
完。

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值