如何使用react-native-maps绘制与编辑多边形？

react-native-maps的官方Polygon组件确实没有内置绘制、编辑功能，但可以通过结合地图交互事件和状态管理来实现这些需求，以下是具体实现思路和示例代码：

一、多边形绘制功能实现 #

核心思路是监听地图点击事件，收集点击的坐标并动态更新Polygon的坐标数组：

• 用状态变量维护多边形的坐标数组，初始可设为空或默认顶点
• 给MapView添加onPress事件，获取点击位置的coordinate
• 将新坐标追加到数组中，触发组件更新，Polygon会自动渲染新的顶点
• 可添加“完成绘制”按钮，手动闭合多边形（将第一个坐标添加到数组末尾）

二、多边形编辑功能实现 #

编辑需要让顶点可拖拽修改，可借助Marker组件实现：

• 遍历坐标数组，为每个顶点渲染一个可拖拽的Marker
• 给Marker添加onDragEnd事件，获取拖拽后的新坐标，更新数组中对应位置的元素
• 可额外添加删除顶点的逻辑（比如点击Marker时删除对应坐标）

完整示例代码 #

import React, { useState } from 'react';
import { View, Button, Alert } from 'react-native';
import MapView, { Polygon, Marker, PROVIDER_GOOGLE } from 'react-native-maps';

const MapWithPolygon = () => {
  // 初始坐标，可设为空数组或默认多边形
  const [coordinates, setCoordinates] = useState([
    { latitude: 37.78825, longitude: -122.4324 },
    { latitude: 37.78825, longitude: -122.4314 },
    { latitude: 37.78725, longitude: -122.4314 },
  ]);
  const [isDrawing, setIsDrawing] = useState(false);

  // 处理地图点击，添加顶点
  const handleMapPress = (e) => {
    if (!isDrawing) return;
    const newCoord = e.nativeEvent.coordinate;
    setCoordinates(prev => [...prev, newCoord]);
  };

  // 完成绘制，闭合多边形
  const finishDrawing = () => {
    if (coordinates.length < 3) {
      Alert.alert('提示', '至少需要3个顶点才能形成多边形');
      return;
    }
    // 闭合多边形：将第一个坐标添加到末尾
    setCoordinates(prev => [...prev, prev[0]]);
    setIsDrawing(false);
  };

  // 处理顶点拖拽更新
  const handleMarkerDragEnd = (index, e) => {
    const newCoord = e.nativeEvent.coordinate;
    setCoordinates(prev => {
      const newCoords = [...prev];
      newCoords[index] = newCoord;
      // 如果是最后一个顶点（闭合用的），同步更新第一个顶点
      if (index === prev.length - 1) {
        newCoords[0] = newCoord;
      } else if (index === 0) {
        newCoords[prev.length - 1] = newCoord;
      }
      return newCoords;
    });
  };

  // 删除顶点
  const deleteVertex = (index) => {
    if (coordinates.length <= 4) { // 包含闭合的第一个点，至少保留3个有效顶点
      Alert.alert('提示', '至少需要3个顶点');
      return;
    }
    setCoordinates(prev => {
      const newCoords = prev.filter((_, i) => i !== index);
      // 如果删除的是第一个顶点，同步更新最后一个闭合点
      if (index === 0) {
        newCoords[newCoords.length - 1] = newCoords[0];
      }
      return newCoords;
    });
  };

  return (
    <View style={{ flex: 1 }}>
      <View style={{ flexDirection: 'row', padding: 10, gap: 10 }}>
        <Button
          title={isDrawing ? '停止绘制' : '开始绘制'}
          onPress={() => setIsDrawing(!isDrawing)}
        />
        {isDrawing && (
          <Button title="完成绘制" onPress={finishDrawing} />
        )}
      </View>
      <MapView
        provider={PROVIDER_GOOGLE}
        style={{ flex: 1 }}
        region={{
          latitude: coordinates[0]?.latitude || 37.78825,
          longitude: coordinates[0]?.longitude || -122.4324,
          latitudeDelta: 0.002,
          longitudeDelta: 0.002,
        }}
        onPress={handleMapPress}
      >
        <Polygon
          coordinates={coordinates}
          strokeColor="#2ecc71"
          fillColor="rgba(46, 204, 113, 0.3)"
          strokeWidth={1}
          tappable={true}
          onPress={() => Alert.alert('多边形被点击')}
        />
        {/* 渲染可拖拽的顶点标记 */}
        {coordinates.slice(0, -1).map((coord, index) => (
          <Marker
            key={index}
            coordinate={coord}
            draggable
            onDragEnd={(e) => handleMarkerDragEnd(index, e)}
            onPress={() => deleteVertex(index)}
          />
        ))}
      </MapView>
    </View>
  );
};

export default MapWithPolygon;

注意事项 #

• 如果使用Google Maps provider，确保已配置好相关权限和API密钥
• 可根据需求优化交互逻辑，比如添加顶点时的视觉反馈、拖拽时的实时更新
• 复杂场景下可以封装自定义的多边形绘制/编辑组件，复用逻辑

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