小程序地图展示poi帖子点击可跳转

缺点

一个帖子只能有一个点击事件，不适合太复杂的功能，因为一个markers只有一个回调回调中只有markerId可以使用。

需求介绍

1. 页面有地图入口，点开可打开地图界面
2. 地图上展示命中poi的帖子。
3. 帖子有图片，文字，用户头像以及用户名称
4. 帖子可以自定义样式

代码

地图页面，地图相关的属性小程序文档有详细的介绍。主要使用了markers功能，可以在地图上面渲染一层view，再结和气泡属性customCallout实现。需要注意的是文档中虽然写了可以同层渲染但亲测在手机端会不显示，所以气泡结构全使用cover-的结构。

<map
    id="map"
    style="width:100%;height: 100%;"
    latitude="{{latitude}}"
    scale="{{scale}}"
    longitude="{{longitude}}"
    subkey="{{mapKey}}"
    markers="{{markers}}"
    bindmarkertap="markertap"
    bindcallouttap="handleTap"
  >
  <cover-view slot="callout">
    <block wx:for="{{calloutList}}" wx:key="index">
      <cover-view class="callout" marker-id="{{item.id}}">
        <cover-image class="icon" mode="aspectFill" src="{{item.contentSummary.imageList[0].url}}" ></cover-image>
        <cover-view class="content">
          <cover-view class="title">{{item.title}}</cover-view>
          <cover-view class="user-info">
            <cover-image class="avatar" src="{{item.postUser.avatarUrl}}" mode="aspectFill"/>
            <cover-view>{{item.postUser.nickName}}</cover-view>
          </cover-view>
        </cover-view>
    </cover-view>
    </block>
  </cover-view>
</map>