小程序地图 使用callout 怎么放多个标签和详细信息

在微信小程序中，利用`map`组件结合`wx:for`指令可以轻松地在地图上显示多个标记(callout)并附带详细信息。下面是一个基本步骤的概述：

1. 首先，在`wxml`文件中设置一个列表数据结构，包含每个标记的位置坐标以及对应的标签内容和详细信息。

<view class="container">
  <map wx:for="{{markers}}">
    <marker latitude="{{item.latitude}}" longitude="{{item.longitude}}" bindtap="onMarkerTap">
      <!-- 标记样式 -->
      <view class="callout" data-id="{{index}}">
        <text>{{item.name}}</text> <!-- 标签名称 -->
        <view class="info">
          <text>地址：{{item.address}}</text>
          <text>详细信息：{{item.detail}}</text>
        </view>
      </view>
    </marker>
  </map>
</view>

2. 然后在`js`文件中定义`onMarkerTap`事件处理函数，当用户点击标记时，显示对应的信息。你可以创建一个新的弹出层，并动态绑定到当前点击的callout。

Page({
  data: {
    markers: [
      // ...
    ]
  },
  
  onMarkerTap(e) {
    const index = e.currentTarget.dataset.id;
    const callout = this.data.markers[index].callout; // 获取当前callout的数据
    // 显示详细的callout内容，例如通过wx.createSelectorQuery()
    // 或者自定义模态框等展示更多信息
  }
})

3. 最后，在CSS文件中编写样式，比如`.callout`、`.info`等类的样式，包括定位、样式和动画效果。