微信小程序地图应用开发踩坑之路

好久没有更新文章了，最近又开发了一款地图应用的微信小程序--快标记，本文主要介绍在全栈开发过程中遇到坑。

本文结构：

1、需求分析；

2、技术架构；

3、开发思路；

4、经验总结。

1、需求分析

需求很简单，使用场景就是：用户可以在手机上添加标记点，并可以填写标记点的简介、说明、图标、联系方式，也可以给标记点分组，然后将标记点或者分组分享给好友，好友点击分享后的链接就可以看到分享的标记点或者分组中标记点，点击标记点可以查看详情，导航到标记点，给标记点打电话。考虑到添加标记的便利性，增加了单击地图即可添加标记，也可以通过语音搜索来添加地点。普通用户限制三个分组，会员可以不限标记分组数。

2、技术架构

整个软件由我一个人全栈开发，考虑到分享的便利性，选择了微信小程序作为载体，后端接口采用springboot开发，接口验证采用jwt，权限控制采用shiro，采用docker部署以保障服务可用性，微信小程序采用原生的JavaScript，考虑到界面的美观，UI框架采用ColorUI快速搭建界面。

3、开发思路

1）用户打开小程序调用登录接口，返回会员信息并保存到本地；

2）加载地图组件，添加标记组，判断用户是否会员来判断是否限制标记组数。

3）选择标记组，用户点击地图获取经纬度、地址信息并保存到服务器，跳转到编辑界面编辑标记点信息。

4）用户可以直接分享标记组或者分享标记点，跳转到分享设置界面，调用微信分享api，带上标记点或者标记组信息标志。

5）被分享用户点击链接打开小程序，获取标记点或者标记组信息，根据设置的权限信息来控制显示内容。

4、踩坑总结

1）切换分组后，地图还残留上一个分组的标记点信息，而且还不能点击，查阅了文档后发现原来是标记点的ID要设置成上一个标记点的ID，不能设置成数据库中的ID，比如下图中的ID：

当然，还有一位一个解决办法：重新加载页面即可，会稍微影响用户体验，具体代码如下：

wx.reLaunch({      url: '/pages/index/index'  })

另外在基础库 2.13.0 开始也可以调用MapContext.removeMarkers方法来更新标记点。

2）、修改完标记点信息后，回到首页如何刷新标记点信息？

当然可以每次在页面onshow的方法中重新调用接口刷新，但是这个方法会影响服务器性能，我的做法是在点击编辑按钮的时候，把点位信息存一份到缓存，编辑完后直接更新缓存，添加完标记点也需要更新缓存，下次刷新就直接从缓存拿。

3）、iOS端不支持购买会员，如何解决？

这个确实是个硬伤，没有好的解决办法，要么提供线下服务，要么提供实物，两者都没有咋弄？我的解决办法是联系客服手动设置为会员。