小程序地图开发

本人近期在做一个汉服的小程序，然后里面有一个功能，就是在地图上显示用户，拖动加载用户，然后用户头像上方还带气泡。

刚刚看到这个界面的时候，比较苦恼，还以为比较难，其实看了一下小程序地图的api，自己也在网上查询了一下资料和实践了一下，

下面来看代码吧

首先引入map 标签代码

最先当然是获取当前定位 可查看链接 https://developers.weixin.qq.com/miniprogram/dev/api/wx.getLocation.html?search-key=getLocation

注意事项：工具中定位模拟使用IP定位，可能会有一定误差。且工具目前仅支持 gcj02 坐标。

填写好经纬度

按需求来吧，

需求1  根据数据用户渲染到地图上面去，然后用户头像上添加上气泡 这里渲染的代码  吧mass 接收到的循环数据放入 map标签中的markers="{{mass}}"  就可以

callout  这一段就是添加气泡的，放入markers 中就可以了。

callout: { content: " 语言：珊珊是不是傻", color: "#ff0000", fontSize: "16", borderRadius: "10", bgColor: "#ffffff", padding: "10", display: "ALWAYS" }

可以查看链接  https://developers.weixin.qq.com/miniprogram/dev/component/map.html

需求2 拖动获取拖动中心点的 经纬度 

首先得在 首页界面渲染完成后 创建一个组件内地图的 map  对象

然后在地图上绑定 拖动事件

js 里面接收就可以了，这就算完成了 拖动地图视野得到中心点经纬度

需求三  点击用户头像 点击得到谁id

我们在填充数据markers的时候，内部有一个id，这个id就是用来区分我点击那一个用户

 通过 bindmarkertap 事件来触发地图上的图片标注事件

在js 里面接收此事件，然后得到点击事件的id

这次的需求不算太难，哈哈到这里就算结束了

想要源码的话  可以去我的github 下载 欢迎指教 https://github.com/13507404693/setr-jilei.git