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

自定义气泡为什么出不来呢？
主要注意以下问题：

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

1. 需要保证 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"
              }
            }

2. 需要在 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日