在小程序页面开发中，我们经常用半屏弹窗来进来内容展示，例如：微信开放社区切换主页、加入购物车的选项页、文章留言区等等。 [图片] 常见的半屏弹窗展示逻辑是这样的： 打开弹窗：点击 “打开弹窗” 按钮展示弹窗关闭弹窗：点击“关闭按钮” or 遮罩层 关闭弹窗当我们想在半屏弹窗加一些交互动画时，可以监听节点的 touch 事件来做一些手势判断，进而处理拖拽事件。但是这种方式实现的滚动动画容易卡顿，出现延迟的情况，效果并不理想。 为了丰富小程序的交互体验，我们内置了一批手势组件，可以帮助开发者更好的实现交互动画的效果。 下图演示使用手势的半屏弹窗下拉效果与普通半屏下拉的对比。 当内部评论列表往下拉到顶部时，变为半屏的下拉，可直接下拉关闭弹窗。 [图片] 我们来看下这种操作是怎么实现的 在上面评论列表的半屏弹窗中会有一个 scroll-view 滚动组件，在 scroll-view 中会有滚动事件，当滚动到顶部时，我们希望有整个半屏的下拉事件。 所以我们需要在半屏的最外层放置一个拖动手势组件 pan-gesture-handler 由于拖动组件内部的 scroll-view 也是可以滚动的，所以这里需要进行一个手势协商的处理，就是什么条件下由哪个组件来响应手势。 当手势往下 ⬇️ 滚动时，此时判断内部 scroll-view 滚动条的位置 滚动条处于顶部：外层 pan-gesture-handler 响应滚动，此时半屏往下拖动至关闭半屏滚动条不处于顶部：内层 scroll-view 响应滚动，此时内部列表往上滚[图片] 当手势往上 ⬆️ 滚动时，此时判断半屏的位置 半屏不完全打开时：外层 pan-gesture-handler 响应滚动，此时半屏往上拖动至完全打开半屏半屏完全打开时：内层 scroll-view 响应滚动，此时内部列表往下滚[图片] 我们来看一下代码的实现，这里用到的手势组件 pan-gesture-handler（拖动时触发）和  vertical-drag-gesture-handler（纵向滑动时触发），手势组件有以下属性 on-gesture-event：手势回调事件should-response-on-move：是否响应当前手势的 move 阶段simultaneous-handlers：指定需要协商的手势是哪几个，下面演示表示 pan 和 scroll 协同触发。native-view：代理的原生节点，这里 scroll-view（scroll-y） 内有个 vertical-drag 手势，scroll-view 自身无法处理，需要被代理出来         ...   接着，我们看看在页面 js 中怎么处理手势。 在手势处理的回调中因为会改变半屏的状态值，所以这里的回调函数采用 worklet 函数，worklet 函数运行在 UI 线程，使得小程序可以做到类原生动画般的体验。 // page.js // shared 创建的变量为共享变量，可在 UI 线程和 JS 线程间同步 this.transY = wx.worklet.shared(1000) this.scrollTop = wx.worklet.shared(0) this.startPan = wx.worklet.shared(true) // shouldPanResponse 和 shouldScrollViewResponse 用于 pan 手势和 scroll-view 滚动手势的协商 shouldPanResponse() {   'worklet'   return this.startPan.value }, shouldScrollViewResponse(pointerEvent) {   'worklet'   // transY > 0 说明 pan 手势在移动半屏，此时 scroll-view 滚动不应生效   if (this.transY.value > 0) return false   const scrollTop = this.scrollTop.value   const { deltaY } = pointerEvent   // deltaY > 0 是往上滚动，scrollTop <= 0 是滚动到顶部边界，此时 pan 开始生效，scroll-view 滚动不生效   const result = scrollTop <= 0 && deltaY > 0   this.startPan.value = result   return !result }, // pan 手势处理 handlePan(gestureEvent) {   'worklet'   if (gestureEvent.state === GestureState.ACTIVE) {     const curPosition = this.transY.value     const destination = Math.max(0, curPosition + gestureEvent.deltaY) // 改变半屏的位置     this.transY.value = destination   }   // 其他手势状态的处理，如滚动结束时计算半屏处于打开还是关闭的状态 } 目前，同程旅行 已经上线了手势结合半屏的效果 体验路径：酒店查询 - 选择酒店 - 选择入住人 - 新增入住人 [图片] 普通半屏结合手势代码片段：https://developers.weixin.qq.com/s/lx0RH1mD7rGj 手势除了在普通半屏的应用之外，也可以实现分段式半屏。下面演示的分段式半屏比普通半屏的判断条件更多一些。 判断条件同普通半屏类似，根据手势方向 和 分段式半屏当前的位置来判断是响应分段式半屏还是内部列表，响应分段式半屏是改变到哪一个位置。 [图片] 这里与普通半屏不同的是我们还改变了地图的缩放级别（scale） 因为 worklet 函数是在 UI 线程运行的，当要改变 data 值时，需要通过 wx.worklet.runOnJS 调回 JS 线程。 // page.js // 设置 map scale // 运行在 JS 线程 setMapScale(scale) {   this.setData({ scale }) }, // worklet 函数，运行在 UI 线程 scrollTo(toValue) {   'worklet'   let scale = 18   if (toValue > screenHeight / 2) {     scale = 16   }   // 从 UI 线程调回 JS 线程   wx.worklet.runOnJS(this.setMapScale.bind(this))(scale)   this.transY.value = timing(toValue, { duration: 200 }) }, // 处理拖动半屏的手势 handlePan(gestureEvent) {   'worklet'   // 滚动半屏的位置   if (gestureEvent.state === GestureState.ACTIVE) {     // deltaY < 0，往上滑动     this.upward.value = gestureEvent.deltaY < 0     // 当前半屏位置     const curPosition = this.transY.value     // 只能在 [statusBarHeight, screenHeight] 之间移动     const destination = clamp(curPosition + gestureEvent.deltaY, statusBarHeight, screenHeight)     if (curPosition === destination) return     // 改变 transY，来改变半屏的位置     this.transY.value = destination   }   if (gestureEvent.state === GestureState.END || gestureEvent.state === GestureState.CANCELLED) {     if (this.transY.value <= screenHeight / 2) {       // 在上面的位置       if (this.upward.value) {         this.scrollTo(statusBarHeight)       } else {         this.scrollTo(screenHeight / 2)       }     } else if (this.transY.value > screenHeight / 2 && this.transY.value <= this.initTransY.value) {       // 在中间位置的时候       if (this.upward.value) {         this.scrollTo(screenHeight / 2)       } else {         this.scrollTo(this.initTransY.value)       }     } else {       // 在最下面的位置       this.scrollTo(this.initTransY.value)     }   } }, 分段式页面代码片段：https://developers.weixin.qq.com/s/fw0U31mI7bGf 半屏的交互除了在页面内实现，也能跨页面实现，如常见的下沉式半屏交互。其中，半屏效果与上述实现类似，而前一页面的下沉实现需要结合自定义路由 后面的文章中我们会介绍自定义路由结合手势怎么去实现下沉式半屏效果，不仅如此，还有很多类原生的页面切换效果都能通过自定义路由实现 [图片]

[图片] 我需要起始点和终点显示在上半部分，但是我用includePoints api时，会显示在整个页面可视区域，我的内容就会遮挡住路径，有什么解决方法吗 f

​近几年来小程序生态的飞速发展大家都有目共睹，随着小程序与线下场景的结合日益紧密，地图类功能已经成为越来越多小程序的“标配”。 腾讯位置服务一直在为微信和小程序提供底层的地图支持。同时，我们也始终在与微信紧密配合，不断夯实丰富我们在小程序下的地图能力，升级开发者的“工具箱”和“武器库”， 满足小程序开发者在不同业务场景下对地图能力的需求。 [图片] Map API功能全新升级 近期小程序在Map API中新增多项功能，其中包含moveAlong、initMarkerCluster等。 moveAlong moveAlong 帮助开发者实现指定路径移动 Marker，并且Marker朝向可以配合路线朝向旋转的效果，主要应用于轨迹回放、出行司乘同显等场景。若动画进行中，对同一 marker 再次调用 moveAlong 方法，前一次的动画将被打断。同时还可以通过设置平滑移动的时间 duration，实现轨迹回放快慢的设置。 [图片] initMarkerCluster initMarkerCluster 即点聚合能力，当地图上需要展示的 marker 过多，可能会导致界面上 marker 出现压盖，展示不全，并导致整体性能变差、用户使用卡顿的情况。针对此类问题，推出点聚合能力，将大量Maker 通过聚合的方式进行展示。比如大型连锁店场景，当用户查找区域甚至是一座城市的某品牌连锁店时，当地图放大层级总览全城时，点聚合能力可以使地图上的点位自动相邻合并达到最佳展示效果。 [图片] openMapApp openMapApp 用来直接调起用户安装的地图App列表，类似微信发送位置时的场景，实现用户跳转其他地图App完成路线规划或导航的需求。以往的使用场景中，用户无法直接通过小程序跳转地图APP，需要先前往微信选点再跳转app，不仅步骤繁琐同时跳转到地图App时并没有携带起终点位置，根本无法实现路线规划。目前此功能可以完美解决该问题，用户可以直接在自己的小程序拉起地图App并展现从起点至终点的路线规划。 [图片] fromScreenLocation 与 toScreenLocation 小程序提供一组新的api，帮助开发者实现屏幕坐标和经纬度的互相转换。fromScreenLocation可以获取屏幕上的点对应的经纬度，toScreenLocation可以获取经纬度对应的屏幕坐标。 includePoints includePoints 即缩放视野展示所有POI。当地图存在多个 POI 点位、地图只显示了部分点位时，通过 includePoints 能力即可完成地图视野级别自动缩放包含所有点位的效果，并且可以通过 padding 设置坐标点形成的矩形边缘到地图边缘的距离，达到最佳显示效果。 [图片] Map组件优化 地图视野控制 小程序Map组件的地图视野控制支持缩放、俯仰、3D楼快等控件，还支持通过向左向右、放大缩小等传统手势控制地图视野变化。同时近期新增的“缩放级别”功能，可以控制 3-20 级别的视野缩放范围，避免用户过大或过小的改变地图视野导致地图展示效果不佳，影响用户体验。 [图片] 覆盖物-彩虹线 新增了彩虹线能力。在路线规划场景，开发者可以通过运用该能力反馈道路拥堵情况，红色拥堵、黄色缓行、绿色畅通。彩虹线作为线条属性与实线、虚线三者相互冲突。 [图片] 地图检索全面上架 要想搭建完整的LBS应用，除了地图展示功能外还离不开地图检索能力。我们在微信开放社区的服务平台上线了一系列服务，包含4个POI数据类（逆地址解析、地址解析、地点搜索、关键词输入提示）、2个路线规划类（驾车路线规划、步行路线规划）、1个坐标工具类（坐标转换），覆盖了绝大部分地图应用场景。 [图片] 考虑到众多开发者有拓展微信小程序海外市场的需求，我们也在腾讯位置服务官网提供了海外位置接口服务，包含了地图、定位、地址解析、逆地址解析、地点搜索、周边搜索、周边推荐、路线规划八种海外服务能力。开发者一次接入即可享受海内外地图无缝切换的极致体验，做到“一次接入、通达全球”。 [图片] 路线规划插件优化升级 路线规划插件近期迭代了导航、实时公交、主题色等多项能力。 导航： 如果说路线规划是为了“看路线”，那么导航就是为了“用路线”。新增的导航能力完善了路线规划只能看不能用的尴尬地位，打通了输入目的地—>选择最优路线—>跳转导航的常规驾车流程，用户点击导航可以拉起地图App，实现小程序与地图App的无缝链接。 [图片] 实时公交： 目前在腾讯位置服务对外开放的产品中，只有路线规划插件提供了实时公交能力。开发者可以帮助用户了解最近一辆公交到站时间和所剩站数。实时公交提升了插件在公共出行领域的服务能力，让用户不再“等公交”。 [图片] 主题色： 开发者可以通过设置主题色的方式，整体更改插件中的字体、线条、按钮、色块等颜色。更改后的插件风格能够完美融入开发者的小程序中，使其整体风格保持一致，再也不会因为插件颜色的突兀而降低用户体验感受。 [图片] 个性化底图支持动态切换 个性化底图切换能力上线，可以实现在小程序内使用同一subkey，通过 layer-style（地图官网设置的样式 style 编号）属性选择不同的底图风格，并可以动态切换样式。比如白天使用浅色系地图，夜晚使用微信深色地图。以下面的Demo为例，可以实现四种style风格动态切换，style1-出行、style2-微信深色、style3-澹月、style4-玉露。 [图片] 示例中心小程序 - 小程序地图开发的最佳助手 为了帮助小程序开发者更好的了解并且使用这些地图能力，我们专门开发了一个示例中心小程序，它有两大作用： 展示地图能力：针对小程序下所有地图相关能力分门别类，梳理出目录架构，逐个进行详细解释；同时每个能力都配有demo示例，让开发者能够体验实际效果，加深理解。 降低开发成本：针对每个demo示例，我们还提供了高质量的源代码，开发者点击首页的“查看源代码”即可跳转至GitHub。其中的文档目录是按照示例中心的结构展示，方便直接拷贝代码在本地进行调试，让开发者实现零成本开发。 对于这么一个贴心的小助手，赶快扫码下方的小程序码立即体验吧！ [图片] 腾讯位置服务会持续打磨好产品，开放更多小程序场景下的地图能力，为开发者提供强有力的支持。我们为小程序开发者打造了包括从服务API、基础地图组件、插件、行业方案等在内的完整的产品能力矩阵，期待与150万+小程序开发者一起拥抱生态，见证繁荣！ [图片]

 // 缩放视野展示所有经纬度(小程序API提供)     this.mapCtx.includePoints({       padding: [200, 100,540, 100],       points: agrments     }); 代码如上，设置这个padding在ios展示正常，在安卓还是会出现遮挡，注明：因为我是在地图上使用了定位，所以有部分地图是被遮挡的，然后就想到设置这个让点都在想要展示的地方展示，页面展示效果如下 [图片]页面想要的展示，

https://developers.weixin.qq.com/miniprogram/dev/api/media/map/MapContext.includePoints.html 我们APP有个这种功能（如下图），底部灰底菜单可以上拉/下拉，地图上的选中点根据地图当前能见到的区域大小，动态合理的展示到地图视野范围呢。iOS端用includepoints可以很好的处理，但是Android端只能识别padding的第一个参数，就无法实现。但是我看腾讯实时公交、滴滴公交、车来了也实现了这种效果，能提供下实现思路吗？ [图片]

背景：做出行相关的小程序，基本天天跟地图打交道，有一个使用场景就是要让一些点在视野内，且地图上有可以拖动的遮挡，根据这个遮挡（参考滴滴小程序的提单页面），调整includePoints，ios可以通过动态设置下padding的方式实现，但是安卓只能传一个值，无法实现这个需求，只能自己在安卓上进行计算，自己控制中心点和sacle，但是能利用的也只有小程序提供的API，显然效果不太好，也给开发造成了额外的困难。（场景如下图，红框部分可以动态调整，地图显示区域需要进行 includePoints） [图片] 其他一些bug或者特性不支持，一般就想办法绕过了，这个不支持真没法在android上完成一些出行场景的实现，我甚至都动态该地图的大小了，但是效果太差，而且我看腾讯地图 安卓的 SDK 也没说padding 的上下左右必须一样，不知道小程序是出于什么样的考虑，这个不一致给双端造成了很大的不一致，我在安卓端，只能自己想办法通过计算实现一个 includePoints。 希望官方能关注下哈，或者有没有碰到相同问题的大佬，是如何解决的呢

<!-- .wxml --> <map id='myMap' longitude='{{longtitude}}' latitude='{{latitude}}' show-location scale='12' markers='{{markers}}' bindmarkertap='tapToShowCard' bindcallouttap='tapToShowDetail'></map> <!-- .js --> var sourceMarker = [{ latitude: 24.508513, longitude: 118.107597, iconPath: '../../sources/marker.png', width: 22, height: 30, callout: { content: '查看详情', fontSize: 16, borderRadius: 5, padding: 8, display: 'ALWAYS' } },{ latitude: 24.508439, longitude: 118.10778, iconPath: '../../sources/marker.png', width: 22, height: 30, callout: { content: '查看详情', fontSize: 16, borderRadius: 5, padding: 8, display: 'ALWAYS' } },{ latitude: 24.5084, longitude: 118.107168, iconPath: '../../sources/marker.png', width: 22, height: 30, callout: { content: '查看详情', fontSize: 16, borderRadius: 5, padding: 8, display: 'ALWAYS' } }] Page({ /**   * 页面的初始数据   */ data: { latitude: 0, longtitude: 0, markers: sourceMarker, points: sourcePoints }, /**   * 生命周期函数--监听页面加载   */ onLoad: function (options) { var that = this; wx.getLocation({ success: function(res) { that.setData({ latitude: res.latitude, longtitude: res.longitude }) that.mapCtx = wx.createMapContext('myMap'); that.includePoints(); }, }) }, includePoints: function () { this.mapCtx.includePoints({ padding: [20], points: [{ latitude: 24.508513, longitude: 118.107597, }, { latitude: 24.508439, longitude: 118.10778, }, { latitude: 24.5084, longitude: 118.107168, }] }) }, /**   * 生命周期函数--监听页面初次渲染完成   */ onReady: function () { }, /**   * 生命周期函数--监听页面显示   */ onShow: function () { }, /**   * 生命周期函数--监听页面隐藏   */ onHide: function () { }, /**   * 生命周期函数--监听页面卸载   */ onUnload: function () { }, /**   * 页面相关事件处理函数--监听用户下拉动作   */ onPullDownRefresh: function () { }, /**   * 页面上拉触底事件的处理函数   */ onReachBottom: function () { }, /**   * 用户点击右上角分享   */ onShareAppMessage: function () { } })

[图片] [图片]我想实现第一张图片的效果，不管起始点的位置多远两个点都在那个范围，而不是终点远了之后，终点就不见了，不在范围内了

为规范开发者的用户个人信息处理行为，保障用户的合法权益，自2023年9月15日起，对于涉及处理用户个人信息的小程序开发者，微信要求，仅当开发者主动向平台同步用户已阅读并同意了小程序的隐私保护指引等信息处理规则后，方可调用微信提供的隐私接口。 开发者首先需确定小程序是否涉及处理用户个人信息，如涉及，则需配置用户隐私授权弹窗，且仅有在平台《小程序用户隐私保护指引》中声明了所处理的用户个人信息，才可以调用平台提供的对应接口或组件。（隐私相关接口） 隐私协议设置整体流程参考下方指引： 一、设置《小程序用户隐私保护指引》 开发者需在「小程序管理后台」设置《小程序用户隐私保护指引》 [图片] [图片] 二、填写《小程序用户隐私保护指引》 [图片] 只有在指引中声明所处理的用户个人信息，才可以调用平台提供的对应接口或组件。若未声明，对应接口或组件将无法调用成功。隐私接口与对应的处理的用户个人信息关系可见：小程序用户隐私保护指引内容介绍 三、配置用户隐私授权弹窗 微信提供了wx.onNeedPrivacyAuthorization(function callback) 接口，意为用户触发了一个微信侧未记录过同意的隐私接口调用，开发者可通过响应该事件选择提示用户的时机。此外，微信还提供了 wx.requirePrivacyAuthorize(Object object) 接口，可用于模拟触发 onNeedPrivacyAuthorization 事件。 小程序开发者可自行设计提示方式与触发时机，详细文档可查看隐私协议开发指南。 仅有在指引中声明所处理的用户个人信息，才可以调用平台提供的对应接口或组件。若未声明，对应接口或组件将直接禁用。 [图片] （参考样例） 四、如要进行代码提审，开发者需先自行声明是否有采集用户隐私，如有，则需在提审页面-「用户隐私保护设置」选择“采集用户隐私” [图片]