[{"attributes":{"lineHeight":"100%","bold":true},"insert":"1、效果图(小程序自己预览需要配置)"},{"attributes":{"header":2},"insert":"\n"},{"insert":{"video":"R10580997-90392b288c0d97d109ac37e4fc9ee1f0_1617856.mp4"}},{"insert":{"image":"R10580997-07dbe9281d77d8cc62a8de97e207c8c1_60770_1164_456.png"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"下载模板后需要配置小程序APPID和APP Secret才可以预览使用，公众号可以不填"},{"insert":"\n\n"},{"attributes":{"lineHeight":"100%"},"insert":"2、逻辑原理"},{"attributes":{"header":2},"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"在原生小程序中，实现这个功能需要借助官方的一些函数，工具内未封装那么多，可以去微信文档中心查看原文档"},{"insert":"\n"},{"attributes":{"lineHeight":"100%","color":"#70b1e7","link":"https://developers.weixin.qq.com/miniprogram/dev/api/media/map/MapContext.getCenterLocation.html"},"insert":"https://developers.weixin.qq.com/miniprogram/dev/api/media/map/MapContext.getCenterLocation.html"},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"主要是利用微信地图的获取中心点经纬度功能，它会返回当前地图范围中心的经纬度，然后我们通过一定的算法，计算出各方向一定距离(模板里是2km)的经纬度，我们则可以用着两个边界的经纬度作为范围去筛选数据库中包含的数据；"},{"insert":"\n\n"},{"attributes":{"color":"#494949","lineHeight":"100%","bold":true},"insert":"注：工具的地图组件是可以直接读取到中心点的经纬度，所以也可以不用这个函数，大家自行选择"},{"insert":"\n"},{"insert":{"image":"R10580997-b3ac2ca3111164c811e24c05442afaa2_44567_973_703.png"}},{"insert":"\n"},{"insert":{"image":"R10580997-04b120bd8b8a5b314fa6db7d31864a17_10707_897_361.png"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"调用函数需要用到的MapContext是地图组件的上下文，我们的工具里可以直接拿到，所以不需要大家再去自己想办法获取，方法如下："},{"insert":"\n"},{"insert":{"image":"R10580997-c0ebeae1e1a058789ec826cddd9a63c0_72810_867_685.png"}},{"insert":"\n\n"},{"attributes":{"lineHeight":"100%"},"insert":"3、计算范围"},{"attributes":{"header":2},"insert":"\n"},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"这是指定范围的核心点，我们拿到中心点经纬度后，我们需要通过一点数学计算来算出一个2km的经纬度差，然后在中心的基础上各自外延这个差值，就可得到一个范围值"},{"insert":"\n\n"},{"insert":{"image":"R10580997-9011a3da65fca0af1d5ea934e13a550d_110859_699_551.png"}},{"insert":"\n\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"函数如上，涉及数学的计算，地理的一点知识，方法不是最精确的那种，需要追求高精度的同学可以网上查阅资料自己研究一下(这里的三个参数分别是精度、维度、距离(单位/米))"},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"部分案例需要显示各个点到中心的距离，这里多给了一个计算两点间距离的函数，虽然案例里没用，大家也可以根据需求看看能不能用上"},{"insert":"\n"},{"insert":{"image":"R10580997-33bfbdcab621e1c83fb25131180da14d_120307_972_385.png"}},{"insert":"\n"},{"attributes":{"header":2},"insert":"\n"},{"attributes":{"lineHeight":"100%"},"insert":"4、初始化获取数据和展示"},{"attributes":{"header":2},"insert":"\n"},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"模板里写入了一些简单的数据，当然想要做这个功能，数据里每条数据经纬度是必须要有的；下面的服务就输出经纬度上下限制的数据用于输出到前台，如果再有其他需求，比如搜索名称可以再自己修改服务；"},{"insert":"\n"},{"insert":{"image":"R10580997-a3b4a230cfbfc5f5a454f747f0149b85_97944_1210_739.png"}},{"insert":"\n\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"展示的时候将输出的数据循环一下，绑定经纬度即可显示标记点，如果有像模板一样要显示名称的，则打开信息开关绑定即可了"},{"insert":"\n\n"},{"insert":{"image":"R10580997-ff51615f9fafc4282b1c18059ebc5706_24854_716_315.png"}},{"insert":"\n\n"},{"attributes":{"lineHeight":"100%"},"insert":"5、地图变化时的获取"},{"attributes":{"header":2},"insert":"\n"},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"由于地图可以放大缩小和拖动，分别都会触发地图的事件，这里会有不同的方案可以选择；如果需要做到一直滑动的过程中也要加载的话，大家可以设置一个变量当开关，当触发服务获取后天数据的时候限制滑动获取，服务结束后再打开，不然会因为触发过于频繁被限制，也不符合数据库的正常要求；模板里为了减少获取的服务，这里使用了手指离开作为触发获取的条件，且在服务运行过程中不会触发再次获取，减小服务的运行次数；"},{"insert":"\n\n"},{"insert":{"image":"R10580997-7f9d7e9da794e45b1566c82affbf7299_198377_1786_846.png"}},{"insert":"\n\n"},{"insert":{"image":"R10580997-be185f8079db8fd70746abc3e6839b18_124665_1617_606.png"}},{"insert":"\n\n\n\n"}]
[{"insert":"业务场景: 在制作地图打卡小程序时，遇到数据量大，需要分页输出的情况。\n提供一个按直线距离几KM内来筛选并分页输出的实现方案供参考。\n"}]
小程序地图里面，移动地图的时候根据地图中心点范围几公里(自己随便设定)加载符合距离要求的数据显示到地图上，类似美团等app地图商家搜索功能
小程序地图里面，移动地图的时候根据地图中心点范围几公里(自己随便设定)加载符合距离要求的数据显示到地图上，类似美团等app地图商家搜索功能
R10580997-faf77df9b7fb211968aafcc3a264e524_297906_454_438.png
https://v4pre.h5app.com/play/BcS9i0Ky