[{"attributes":{"lineHeight":"100%"},"insert":"1、效果图(小程序自己预览需要配置)"},{"attributes":{"header":2},"insert":"\n"},{"insert":{"video":"R10580997-92b979ebba05a2b03cc51f4647b0faf8_1262982.mp4"}},{"insert":"\n"},{"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.getRegion.html"},"insert":"https://developers.weixin.qq.com/miniprogram/dev/api/media/map/MapContext.getRegion.html"},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"主要是利用微信地图的获取边界功能，它会返回当前地图范围内的两个对角的经纬度(分别是东北角和西南角)，我们则可以用着两个角的经纬度作为范围去筛选数据库中包含的数据；"},{"insert":"\n"},{"insert":{"image":"R10580997-1f5387eeab5bc7b2502df1fd0f5f1468_39691_878_651.png"}},{"insert":"\n\n"},{"insert":{"image":"R10580997-0a5fe816229bca8d4f47611d89d90370_27373_947_777.png"}},{"insert":"\n\n\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"调用函数需要用到的MapContext是地图组件的上下文，我们的工具里可以直接拿到，所以不需要大家再去自己想办法获取，方法如下："},{"insert":"\n"},{"insert":{"image":"R10580997-a14ee65183bf224bec2499f2c450398d_18529_798_203.png"}},{"insert":"\n\n"},{"insert":{"image":"R10580997-0f1bf457963018314516c357ae4b5c49_172693_1516_432.png"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"上面第一步拿到上下文后，就可以用它去调用微信组件的原生方法，获取到边界，这里需要用了异步函数来等待获取的结果，拿到结果后就可以用它去获取最新的数据；"},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"lineHeight":"100%"},"insert":"3、初始化获取数据和展示"},{"attributes":{"header":2},"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"模板里写入了一些简单的数据，当然想要做这个功能，数据里每条数据经纬度是必须要有的；下面的服务就输出经纬度上下限制的数据用于输出到前台，如果再有其他需求，比如搜索名称可以再自己修改服务；"},{"insert":"\n"},{"insert":{"image":"R10580997-1ba218ff71fd59370cbacf18b066494f_148239_1508_776.png"}},{"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"展示的时候将输出的数据循环一下，绑定经纬度即可显示标记点，如果有像模板一样要显示名称的，则打开信息开关绑定即可了"},{"insert":"\n"},{"insert":{"image":"R10580997-aee0398cfac572cf3417863ad1349d9d_149274_1685_522.png"}},{"insert":"\n\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":" "},{"insert":"\n"},{"attributes":{"lineHeight":"100%"},"insert":"4、地图变化时的获取"},{"attributes":{"header":2},"insert":"\n"},{"attributes":{"color":"#494949","lineHeight":"100%"},"insert":"由于地图可以放大缩小和拖动，分别都会触发地图的事件，这里会有不同的方案可以选择；如果需要做到一直滑动的过程中也要加载的话，大家可以设置一个变量当开关，当触发服务获取后天数据的时候限制滑动获取，服务结束后再打开，不然会因为触发过于频繁被限制，也不符合数据库的正常要求；模板里为了减少获取的服务，这里使用了手指离开作为触发获取的条件，且在服务运行过程中不会触发再次获取，减小服务的运行次数；"},{"insert":"\n"},{"insert":{"image":"R10580997-a13ed4e38e8b5b22dadef66a3c31e808_118049_963_821.png"}},{"insert":"\n\n"},{"insert":{"image":"R10580997-3bd42cd332a6d60837a0d451b74802de_92594_1574_410.png"}},{"insert":"\n\n"}]
[{"insert":"业务场景：在制作地图打卡小程序时，遇到数据量大，需要分页输出的情况。\n希望基于地理位置进行分页输出，即：只输出当前屏幕范围内经纬度的数据。\n"}]
根据小程序地图显示范围动态加载数据，类似于某团美食商户地图效果，通过微信小程序的原生定位方法获取地图的边界经纬，然后数据库条件输出
根据小程序地图显示范围动态加载数据，类似于某团美食商户地图效果，通过微信小程序的原生定位方法获取地图的边界经纬，然后数据库条件输出
R10580997-2bafc7aa838f80541ef4106cf2a0d68f_136065_311_316.png
https://v4pre.h5app.com/play/EjrVhO9P