react-native-maps多边形点击事件传播阻止方案问询

为什么event.stopPropagation()无效？ #

react-native-maps的事件系统基于原生组件实现，并非Web端的DOM事件冒泡机制，所以调用event.stopPropagation()无法阻止事件传递到MapView的点击监听器。

方案1：通过坐标判断点击点是否在多边形内 #

核心思路：地图点击时，先检查点击坐标是否落在任意一个多边形范围内，若在则不执行添加标记逻辑，反之则添加。

实现步骤： #

1. 编写点-in-多边形的判断函数（射线法）：

// 判断坐标是否在多边形内（射线法）
const isPointInPolygon = (point, polygonCoordinates) => {
  let inside = false;
  const x = point.latitude;
  const y = point.longitude;

  for (let i = 0, j = polygonCoordinates.length - 1; i < polygonCoordinates.length; j = i++) {
    const xi = polygonCoordinates[i].latitude;
    const yi = polygonCoordinates[i].longitude;
    const xj = polygonCoordinates[j].latitude;
    const yj = polygonCoordinates[j].longitude;

    const intersect = ((yi > y) !== (yj > y))
      && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
    if (intersect) inside = !inside;
  }

  return inside;
};

2. 在MapView的onPress事件中进行判断：

import MapView, { Polygon, Marker } from 'react-native-maps';
import { useState } from 'react';

const MapComponent = () => {
  const [polygons, setPolygons] = useState([
    { id: '1', coordinates: [...], fillColor: 'rgba(0,0,255,0.3)' },
    { id: '2', coordinates: [...], fillColor: 'rgba(255,0,0,0.3)' },
  ]);
  const [highlightedPolygonId, setHighlightedPolygonId] = useState(null);
  const [markers, setMarkers] = useState([]);

  // 多边形点击高亮
  const handlePolygonPress = (polygonId) => {
    setHighlightedPolygonId(polygonId);
  };

  // 地图点击添加标记
  const handleMapPress = (event) => {
    const clickedPoint = event.nativeEvent.coordinate;
    // 检查点击点是否在任意多边形内
    const isInAnyPolygon = polygons.some(polygon => 
      isPointInPolygon(clickedPoint, polygon.coordinates)
    );
    if (!isInAnyPolygon) {
      setMarkers(prev => [...prev, { id: Date.now(), coordinate: clickedPoint }]);
    }
  };

  return (
    <MapView onPress={handleMapPress} style={{ flex: 1 }}>
      {polygons.map(polygon => (
        <Polygon
          key={polygon.id}
          coordinates={polygon.coordinates}
          fillColor={highlightedPolygonId === polygon.id ? 'rgba(255,255,0,0.5)' : polygon.fillColor}
          onPress={() => handlePolygonPress(polygon.id)}
        />
      ))}
      {markers.map(marker => (
        <Marker key={marker.id} coordinate={marker.coordinate} />
      ))}
    </MapView>
  );
};

方案2：使用Ref同步控制事件触发 #

核心思路：用Ref存储多边形是否被点击的状态，因为Ref的更新是同步的，能保证MapView的点击事件能即时读取到最新状态。

实现代码： #

import MapView, { Polygon, Marker } from 'react-native-maps';
import { useState, useRef } from 'react';

const MapComponent = () => {
  const [polygons, setPolygons] = useState([...]);
  const [highlightedPolygonId, setHighlightedPolygonId] = useState(null);
  const [markers, setMarkers] = useState([]);
  // 用Ref存储多边形点击状态
  const isPolygonClicked = useRef(false);

  const handlePolygonPress = (polygonId) => {
    setHighlightedPolygonId(polygonId);
    // 标记多边形已被点击
    isPolygonClicked.current = true;
    // 延迟重置状态，避免极端场景下的误判
    setTimeout(() => {
      isPolygonClicked.current = false;
    }, 100);
  };

  const handleMapPress = (event) => {
    if (isPolygonClicked.current) {
      // 重置状态，不执行添加标记
      isPolygonClicked.current = false;
      return;
    }
    // 添加标记逻辑
    setMarkers(prev => [...prev, { id: Date.now(), coordinate: event.nativeEvent.coordinate }]);
  };

  return (
    <MapView onPress={handleMapPress} style={{ flex: 1 }}>
      {polygons.map(polygon => (
        <Polygon
          key={polygon.id}
          coordinates={polygon.coordinates}
          fillColor={highlightedPolygonId === polygon.id ? 'rgba(255,255,0,0.5)' : polygon.fillColor}
          onPress={() => handlePolygonPress(polygon.id)}
        />
      ))}
      {markers.map(marker => (
        <Marker key={marker.id} coordinate={marker.coordinate} />
      ))}
    </MapView>
  );
};

方案对比 #

• 方案1更可靠，无需依赖事件触发顺序，完全通过坐标判断，适合复杂多边形场景，但需要额外的计算逻辑。
• 方案2实现简单，依赖事件触发顺序（Polygon的onPress先于MapView的onPress），适合性能要求高、多边形数量不多的场景。

内容的提问来源于stack exchange，提问作者mark fuechec