【微信小程序】 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 哈

2020年9月3日