微信小程序 点击地图后弹出一个模态框

展示效果：

html:

<!-- WXML部分 -->
<view class="container">
  <map 
    id="myMap" 
    longitude="{{longitude}}" 
    latitude="{{latitude}}" 
    scale="{{scale}}" 
    style="width: 100%; height: 100vh" 
    bindtap="onMapTap"
    markers="{{markers}}"
    polyline="{{polyline}}"
    polygons="{{polygons}}"
    bindregionchange="onRegionChange"
    show-location
    bindmarkertap="handleMarkerTap"
    bindlabeltap="handleMarkerTap"  
  >
  </map>
  
  <!-- 底部模态框 -->
  <view class="modal-overlay {{showModal ? 'active' : ''}}" bindtap="closeModal"></view>
  <view class="modal-content {{showModal ? 'active' : ''}}">
    <view class="modal-header">
      <text class="modal-title">位置详情</text>
      <text class="close-btn" bindtap="closeModal">×</text>
    </view>
    <view class="modal-body">
      <text class="location-name">{{selectedMarker ? selectedMarker.title : ''}}</text>
      <text class="location-desc">这是一个示例位置描述，您可以在这里添加关于此位置的详细信息。</text>
      <view class="location-info">
        <text class="info-item">地址: 示例街道123号</text>
        <text class="info-item">电话: 123-456-7890</text>
        <text class="info-item">营业时间: 09:00-18:00</text>
      </view>
    </view>
    <view class="modal-footer">
      <button class="btn-secondary" bindtap="closeModal">取消</button>
      <button class="btn-primary" bindtap="navigateToDetail">查看详情</button>
    </view>
  </view>
</view>

css:

/* WXSS部分 */
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

/* 模态框遮罩层 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* 模态框内容 */
.modal-content {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 1000;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.modal-content.active {
  transform: translateY(0);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.close-btn {
  font-size: 48rpx;
  color: #999;
  line-height: 1;
}

.modal-body {
  padding: 30rpx;
}

.location-name {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.location-desc {
  display: block;
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 30rpx;
}

.location-info {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.info-item {
  font-size: 26rpx;
  color: #888;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  gap: 20rpx;
}

.btn-primary, .btn-secondary {
  flex: 1;
  padding: 20rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  border: none;
}

.btn-primary {
  background-color: #07c160;
  color: white;
}

.btn-secondary {
  background-color: #f0f0f0;
  color: #333;
}

js:

// JS部分
Page({
  data: {
    longitude: 116.397428, // 默认经度
    latitude: 39.90923,    // 默认纬度
    scale: 14,             // 地图缩放级别
    markers: [
      {
        id: 1,
        latitude: 39.90923,
        longitude: 116.397428,
        title: '天安门广场',
        iconPath: '/images/marker.png',
        width: 30,
        height: 30
      },
      {
        id: 2,
        latitude: 39.91423,
        longitude: 116.407428,
        title: '故宫博物院',
        iconPath: '/images/marker.png',
        width: 30,
        height: 30
      }
    ],
    polyline: [],
    polygons: [],
    showModal: false,
    selectedMarker: null
  },

  onLoad: function() {
    // 页面加载时的初始化逻辑
  },

  onMapTap: function(e) {
    // 地图点击事件
    console.log('地图被点击', e);
  },

  onRegionChange: function(e) {
    // 区域变化事件
    console.log('地图区域变化', e);
  },

  // 处理标记点击事件
  handleMarkerTap: function(e) {
    const markerId = e.markerId;
    const marker = this.data.markers.find(m => m.id === markerId);
    
    if (marker) {
      this.setData({
        selectedMarker: marker,
        showModal: true
      });
    }
  },

  // 关闭模态框
  closeModal: function() {
    this.setData({
      showModal: false
    });
  },

  // 跳转到详情页面
  navigateToDetail: function() {
    // 先关闭模态框
    this.closeModal();
    
    // 跳转到详情页面
    wx.navigateTo({
      url: `/pages/locationDetail/locationDetail?id=${this.data.selectedMarker.id}`
    });
  }
});