小程序
小游戏
企业微信
微信支付
扫描小程序码分享
bindcallouttap只能设置整个气泡的点击事件,但是我现在的需求是设置关闭按钮,请问怎么才能添加?
4 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
这个根本就是微信小程序的bug、一直以来都没人修复、marker的气泡点击事件只能绑定到map上、不能绑定到具体的callout自定义元素上面、真服了
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
在 bindcallouttap 事件中创建自定义气泡内容:首先,在 bindcallouttap 事件中创建一个自定义的气泡内容,包括需要展示的信息和关闭按钮。
marker: [{ id: 0, latitude: 39.9, longitude: 116.4, callout: { content: '这里是气泡内容<div class="close-btn">关闭</div>', display: 'ALWAYS', padding: 10, borderRadius: 5, textAlign: 'center' } }]
在这个示例中,我们将气泡内容设置为一个 <div> 元素,其中包括要展示的信息和一个 "关闭" 按钮。
注册关闭按钮的点击事件:接下来,您需要监听关闭按钮的点击事件,并在点击时关闭气泡。可以通过以下方式实现:
Page({ onMarkerTap(event) { const { markerId, type } = event.detail; if (type === 'label' && markerId === 0) { // 处理气泡点击事件 const className = event.detail.target.dataset.className; if (className === 'close-btn') { // 关闭气泡 this.setData({ marker: [] }); } } } })
在这个示例中,我们通过监听 onMarkerTap 事件,并在事件处理函数中判断点击的元素是否为 "关闭" 按钮(根据按钮的 CSS 类名)。如果是,则执行关闭气泡的操作,例如将 marker 数组设置为空来隐藏气泡。
使用原生点击事件试试
关闭的布局不是你画的吗?直接加点击事件不行吗
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
这个根本就是微信小程序的bug、一直以来都没人修复、marker的气泡点击事件只能绑定到map上、不能绑定到具体的callout自定义元素上面、真服了
在 bindcallouttap 事件中创建自定义气泡内容:首先,在 bindcallouttap 事件中创建一个自定义的气泡内容,包括需要展示的信息和关闭按钮。
marker: [{ id: 0, latitude: 39.9, longitude: 116.4, callout: { content: '这里是气泡内容<div class="close-btn">关闭</div>', display: 'ALWAYS', padding: 10, borderRadius: 5, textAlign: 'center' } }]
在这个示例中,我们将气泡内容设置为一个 <div> 元素,其中包括要展示的信息和一个 "关闭" 按钮。
注册关闭按钮的点击事件:接下来,您需要监听关闭按钮的点击事件,并在点击时关闭气泡。可以通过以下方式实现:
Page({ onMarkerTap(event) { const { markerId, type } = event.detail; if (type === 'label' && markerId === 0) { // 处理气泡点击事件 const className = event.detail.target.dataset.className; if (className === 'close-btn') { // 关闭气泡 this.setData({ marker: [] }); } } } })
在这个示例中,我们通过监听 onMarkerTap 事件,并在事件处理函数中判断点击的元素是否为 "关闭" 按钮(根据按钮的 CSS 类名)。如果是,则执行关闭气泡的操作,例如将 marker 数组设置为空来隐藏气泡。
callout: {
content: “这里是气泡内容<div class=”close-btn”>关闭</div>“,
padding: 10,
anchorX: 0,
anchorY: 20,
display: "ALWAYS"
},
使用原生点击事件试试
关闭的布局不是你画的吗?直接加点击事件不行吗
catch:tap=“bindCalloutClose“无效