小程序地图组件(map)中使用全屏预览图片(previewImage)的问题解决方案

小程序地图组件(map)中使用全屏预览图片(previewImage)的问题解决方案

背景

在小程序中 Map 组件中使用 previewImage 预览图片，无法在地图组件上预览图片，如果返回到上一页 previewImage 方法才会打开预览图片。

因为 map 组件是原生组件，层级默认最高，会覆盖在 WebView 之上。由于原生组件的隔离性，可能导致 previewImage 的调用被阻塞或延迟执行。

解决方案

方案一：弹窗打开预览图片

在地图组件上使用 cover-view、cover-image 等标签通过弹窗事项图片预览。

预览图片弹窗组件 使用 taro 框架为例： map 组件内的

index.jsx

import { View, Swiper, SwiperItem, Image } from '@tarojs/components';
import classNames from 'classnames';

import styles from './index.module.scss';

const MapPreviewImage = (props) => {
  const { visible, onClose, images = [], current = 0 } = props;

  return (
    <View className={classNames(styles.imageModal, { [styles.visible]: visible })} onClick={onClose} catchMove>
      <Swiper
        current={current}
        className={styles.swiper}
        indicator-dots
        indicator-color="#fff"
        indicator-active-color="#DB5545"
      >
        {images?.map?.((image) => (
          <SwiperItem key={image} className={styles.swiperItem}>
            <View className={styles.imageWrapper}>
              <Image
                className={styles.image}
                mode="widthFix"
                src={image}
                onClick={(e) => {
                  e.stopPropagation();
                  e.preventDefault();
                }}
              />
            </View>
          </SwiperItem>
        ))}
      </Swiper>
    </View>
  );
};

export default MapPreviewImage;

index.module.scss

.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 100;
  transition: all 0.3s ease-in-out;
  display: none;
  background-color: #000;

  &.visible {
    display: block;
  }

  .swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .image-wrapper {
    width: 100%;
    height: auto;
  }
}

使用预览图片弹窗组件 indx.jsx

import { View, Map } from '@tarojs/components';
import MapPreviewImage from '../MapPreviewImage';

const Index = () => {
 const [visible, setVisible] = useState(false);
 const [previewImages, setPreviewImages] = useState([]); // img url

  return (
      <Map style={{height: '100vh'}} {...地图属性}>
        <View onClick={() => setVisible(true)}>打开弹窗</View>
          
        <MapPreviewImage 
            visible={visible} 
            onClose={() => setVisible(false)} 
            images={previewImages} />
      </Map>
  );
}

export default Index;

方案二：调整到新页面使用 previewImage 方法预览图片

1. 定义一个新页面，props 需要有 previewImage 的 urls; 在 useEefft 或者小程序的生命周期内调用 previewImage 方法打开预览图片；
2. 在 Map 组件页面，触发事件，跳转到预览图片页面并带需要的参数
3. 此方案不具体赘述，不提供代码

注意事项

1. Map 组件中的 View 使用 onClick 方法会有延迟，或可以使用 onTouchStart。
2. Map 组件内的其他元素滑动会带动地图滑动，可在元素上添加 catchMove 属性。