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

展示效果：

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-locationbindmarkertap="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}`});}
});