uniapp 微信小程序 map自定义气泡customCallout

需求：要在marker的下方展示该站点名称，但默认的气泡是在上方，后查阅微信小程序官方文档发现marker属性有个customCallout可自定义气泡

 直接上代码

<template>
	<view class="page-body">
	  <view class="page-section">
	    <map 
	      id="map1" ref="map1"
	      style="width: 100%; height: 100%;" 
	      :markers="markers"
	      :latitude="latitude" 
	      :longitude="longitude"	     
	      :scale="mapScale"
	      @markertap="markertap"
	    >
         <cover-view slot="callout">
          <block v-for="(item, index) in customCalloutMarkerIds" :key="index">
            <cover-view  class="customCallout" :marker-id="item">
              <cover-view class="content">
                {{markers[index].stationName}}
              </cover-view>
            </cover-view>
          </block>
         </cover-view>
	    </map>
     </view>
   </view>
</template>
<script>
	export default {
		data() {
			return {
        latitude: 30.17489176432292,
        longitude: 120.2113267686632,
        markers: [{
          id: 1,
          latitude: 30.174892900,
          longitude: 120.2113275343,
          iconPath: '../../static/images/icon_bus_stop@2x.png',
          width: 24 * 1.5,
          height: 38 * 1.5,
          stationName: '江晖大厦',
          distance: 10,
          lineList: ['735路区间岳连线', '415路', '105路', '203-2路'],
          customCallout: {
            anchorY: 70,
            anchorX: 0,
            display: 'ALWAYS',
          }
        }, {
          id: 2,
          latitude: 30.174894900,
          longitude: 120.2133285343,
          iconPath: '../../static/images/icon_bus_stop@2x.png',
          width: 24,
          height: 38,
          stationName: '滨康路口',
          distance: 20,
          lineList: ['735路', '415路', '105路', '203-2路'],
          customCallout: {
            anchorY: 70,
            anchorX: 0,
            display: 'NONE',
          }
        }, {
          id: 3,
          latitude: 30.172792900,
          longitude: 120.2133285343,
          iconPath: '../../static/images/icon_bus_stop@2x.png',
          width: 24,
          height: 38,
          stationName: '新都会',
          distance: 30,
          lineList: ['15路', '115路', '104路', '203M路'],
          customCallout: {
            anchorY: 70,
            anchorX: 0,
            display: 'NONE',
          },
        }], // 地图上markers列表
        customCalloutMarkerIds: [1,2,3],
        mapScale: 16, // 地图默认放大倍数
      }
    },
    methods: {
      markertap(e) {
        const that = this
        let markers = this.markers
        markers.find(function(item, index){
          if(item.id == e.markerId){
            that.swiperCurrent = index  // 点击marker 实现底部滑到相对应的站点
            item.customCallout.display = 'ALWAYS' // 点击marker 显示站点名
            item.width = 24 * 1.5
            item.height = 38 * 1.5
          } else {
            item.customCallout.display = 'NONE'
            item.width = 24
            item.height = 38
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
.page-body{
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  overflow: hidden;
	  .page-section{
	    width: 100%;
	    height: 100%;
	    position: absolute;
	  }
    .customCallout {
      box-sizing: border-box;
      background-color: #fff;
      background: #FFFFFF;
      box-shadow: 0px 4rpx 16px 0px rgba(189, 191, 193, 0.4);
      border-radius: 4rpx;
      display: inline-flex;
      padding: 6rpx 24rpx;
      justify-content: center;
      align-items: center;
      color: #2A7BE2;
    }
}
</style>

文章来源地址https://uudwc.com/A/jA519

最后效果图