1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 【微信小程序】 map 组件 callout 自定义气泡 (实实在在的讲解)

【微信小程序】 map 组件 callout 自定义气泡 (实实在在的讲解)

时间:2022-08-05 02:03:15

相关推荐

【微信小程序】 map 组件 callout 自定义气泡 (实实在在的讲解)

自定义气泡为什么出不来呢?

主要注意以下问题:

首先这里的 customCallout 是作为一个属性存在的,那么自然要在 WXML 中有所体现,主要体现在 markers 对象中的数据结构。

需要保证 markers 对象中有如下字段

customCallout: {anchorX: 0,anchorY: 0,display: "ALWAYS"}

比如我自己开发过程中使用的对象结构:

marker = {id: i,_id: "",iconPath: '/images/Marker3_Activated@3x.png',latitude: "",longitude: "",width: 30,height: 30,customCallout: {anchorX: 0,anchorY: 0,display: "ALWAYS"}}

需要在 WXML 添加对应的组件:

<map><cover-view slot="callout"><cover-view marker-id="1"></cover-view><cover-view marker-id="2"></cover-view></cover-view></map>

这里注意使用 cover-view 然后配置 marker-id

当然也可以用数组形式配置

<block wx:for="{{customCalloutMarkerIds}}" wx:key="*this"><cover-view class="customCallout" marker-id="{{item}}"><cover-view class="content">test</cover-view></cover-view></block>

数组中存储着所有需要显示的 markers 的 id

注意一定是 number 类型的 id 哈

9月3日

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。