地图点击标记功能异常：首次返回undefined且无法添加标记

嘿，我帮你排查下这个问题！从你贴的代码片段和描述来看，确实大概率是状态管理逻辑和坐标获取方式出了问题，咱们一步步来解决：

核心问题分析 #

1. 坐标获取错误：在React Native的地图组件（比如react-native-maps）中，点击事件的坐标并不是直接挂在event上，而是藏在event.nativeEvent.coordinate里——这就是你首次点击返回undefined的直接原因。
2. 单状态无法存储多标记：你现在用单个coordinate对象存坐标，每次点击都会覆盖之前的值，自然看不到后续添加的标记；应该用数组来存储所有标记的坐标。
3. 冗余的绑定操作：你同时用了箭头函数定义handleMarkerPress和bind(this)，其实箭头函数在类中定义时会自动绑定this，二选一即可，避免冗余。

修复后的完整代码示例 #

import React, { Component } from 'react';
import { MapView, Marker } from 'react-native-maps';

class MapWithMarkers extends Component {
  constructor(props) {
    super(props);
    this.state = {
      markers: [] // 用数组存储所有标记的坐标
    };
    // 因为用了箭头函数，这里可以不用bind，如果你习惯用bind也可以保留
    // this.handleMarkerPress = this.handleMarkerPress.bind(this);
  }

  // 正确处理地图点击事件，添加标记
  handleMarkerPress = (event) => {
    // 从nativeEvent中取出正确的坐标
    const newMarker = event.nativeEvent.coordinate;
    // 用展开运算符创建新数组，避免直接修改原状态
    this.setState(prevState => ({
      markers: [...prevState.markers, newMarker]
    }));
  };

  render() {
    return (
      <MapView
        style={{ flex: 1 }}
        onPress={this.handleMarkerPress} // 给MapView绑定点击事件，不是Marker
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      >
        {/* 遍历markers数组渲染所有标记 */}
        {this.state.markers.map((marker, index) => (
          <Marker
            key={index} // 最好用唯一标识当key，比如后端返回的id，index是兜底方案
            coordinate={marker}
            title={`标记${index + 1}`}
          />
        ))}
      </MapView>
    );
  }
}

export default MapWithMarkers;

额外注意事项 #

• 确保你是给MapView绑定onPress事件，而不是给单个Marker绑定——这样点击地图空白处才会触发添加标记。
• 如果需要支持删除标记，可以给每个Marker加点击事件，通过过滤数组来移除对应坐标。

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