用一根手指触摸地图时在移动设备上添加消息

Question

有一张react-leaflet地图，此时禁用单指拖动地图。

我想在向任意方向滑动地图时显示一条消息，要求使用两根手指移动地图。

有人可以帮我实现这个吗？

Answer 1

我曾经计算用户在触摸时使用的手指数量，如果是一根手指，那么我将状态设置为显示信息以使用两根手指

    /**
     * Change state to show drag info to user and after some time hides the same message.
     */
    showDragInfoMessage = () => {
        if (!this.state.showOneFingerDragInfo) {
            this.setState({
                showOneFingerDragInfo: true
            });
        }
    };

    /**
     * Maps move handler.
     *
     * @param event
     */
    handleMapMove = (event) => {
        if (event.type === 'touchmove' && !this.state.disableOneFingerDragInfo) {
            let currentY = event.touches[0].clientY;
            let currentX = event.touches[0].clientX;

            if ((Math.abs(currentY - this.state.touchLastY) > 100 || Math.abs(currentX - this.state.touchLastX) > 100)) {
                if (event.touches.length < 2) {
                    this.showDragInfoMessage();
                } else {
                    if (this.state.showOneFingerDragInfo) {
                        event.preventDefault();
                        this.setState({
                            showOneFingerDragInfo: false
                        });
                    }
                }
            }
        }
    };

<div id={'overlay'} style={{display: this.state.showOneFingerDragInfo ? 'block' : 'none'}}>
    <span>Use two finger to move the map</span>
</div>

用一根手指触摸地图时在移动设备上添加消息

Add message on mobile device when map is touched with one finger

reactjs

react-leaflet