需求背景：

点击地图masker显示如下图的气泡点，气泡内有两个按钮可点击。

需求实现过程：

1. 官方自定义气泡方法，具体看文档。无法点击实现。bindcallouttap只能是map的事件，获取的是markerId，无法获取内部布局设置的data-id。
2. 换一种思路：固定弹窗中间显示，点击masker-设置弹窗显示-设置map的中心点lat,lng。
3. 容错处理： 视野变化需要隐藏弹窗

实现效果：

注意项：

1. 关闭选择 enable-rotate='false'
2. 出现以下截图显示的问题， 设置一下masker每个点的width, height

示例代码：

wxml

<view class="pr" >
    <view hidden="{{!show}}" class="conent">
    <view class="item" bindtap="click" data-id="1">点击1</view>
    <view class="item" bindtap="click" data-id="2">点击2</view>
    </view>
    <map
      id="myMap"
      style="width: 100%; height: 300px;"
      latitude="{{latitude}}"
      longitude="{{longitude}}"
      bindmarkertap="markertap"
      markers="{{markers}}"
      scale="16"
      bindregionchange="regionchange"
      show-location
      bindabilitysuccess='success'
      enable-rotate="false"
    >
    </map>
  </view>

js

const normalCallout = {
  id: 1,
  latitude: 23.098994,
  longitude: 113.32252,
  iconPath: "/image/location.png",
  width: 24,
  height: 24,
};


const customCallout1 = {
  id: 2,
  latitude: 23.097994,
  longitude: 113.32352,
  iconPath: "/image/location.png",
  width: 24,
  height: 24,
};


const customCallout2 = {
  id: 3,
  latitude: 23.096994,
  longitude: 113.32452,
  iconPath: "/image/location.png",
  width: 24,
  height: 24,
};


const customCallout3 = {
  id: 4,
  latitude: 23.095994,
  longitude: 113.32552,
  iconPath: "/image/location.png",
  width: 24,
  height: 24,
};


const allMarkers = [
  normalCallout,
  customCallout1,
  customCallout2,
  customCallout3,
];


Page({
  data: {
    latitude: 23.096994,
    longitude: 113.32452,
    markers: [],
    customCalloutMarkerIds: [],
    num: 1,
    show: false,
  },
  onReady: function (e) {
    this.mapCtx = wx.createMapContext("myMap");
    this.setData({
      markers: allMarkers,
    });
  },
  markertap(e) {
    console.log("@@@ markertap", e);
    const { markers } = this.data;
    const { latitude, longitude } = markers.find((item) => {
      return item.id === e.detail.markerId;
    });
    this.setData({
      show: true,
      latitude,
      longitude,
    });
  },
  click(e) {
    wx.showToast({
      title: `点击了按钮${e.currentTarget.dataset.id}`,
    });
  },
  regionchange(e) {
    console.log(e);
    if(e.type === 'begin') {
      this.setData({
        show: false,
      });
    }
    const {latitude, longitude } = e.detail.centerLocation || ''
    if(latitude===this.data.latitude && longitude === this.data.longitude) {
      this.setData({
        show: true,
      });
    } else {
      this.setData({
        show: false,
      });
    }
  }
});

wxss:

.pr {
  position: relative;
}
.conent {
  position: absolute;
  z-index: 1;
  background-color: pink;
  top: 0;
  bottom: 300rpx;
  right: 0;
  left: 0;
  width: 200rpx;
  height: 100rpx;
  margin: auto;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.conent::before {
  content: "";
  position: absolute;
  bottom: -40rpx;
  left: 80rpx;
  width: 0;
  height: 0;
  border: 20rpx solid;
  border-color: green transparent transparent;
}
.item {
  padding: 12rpx 8rpx;
  border: 1rpx solid #eee;
  color: white;
  height: 44rpx;
  font-size: 24rpx;
  border-radius: 14rpx;
}
.item:first-child {
  margin-right: 10rpx;
}

代码片段：https://developers.weixin.qq.com/s/xnx54hm27YJB