react-native-maps获取标记点title与位置并通过state设置指定位置属性方法

核心实现逻辑 #

• 用state管理所有标记点的坐标、title、description数据，避免写死属性
• 绑定Marker的点击事件，触发时读取对应标记的属性存入state，实现获取需求
• 需要修改指定位置属性时，直接更新state中对应坐标的属性值即可自动刷新视图

完整可运行示例代码 #

import React, { useState } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import MapView, { Marker } from 'react-native-maps';

const AddLocation = () => {
  // 存储所有标记点数据，可动态新增/修改
  const [markers, setMarkers] = useState([
    {
      latitude: 33.738045,
      longitude: 73.084488,
      pinColor: 'red',
      title: '初始标题',
      description: '初始描述内容'
    }
  ]);
  // 存储用户点击标记后获取到的title和description
  const [selectedLocationInfo, setSelectedLocationInfo] = useState({
    title: '',
    description: ''
  });

  // 修改指定位置的title和description示例方法
  const updateLocationInfo = (lat, lng, newTitle, newDesc) => {
    setMarkers(prev => prev.map(item => {
      // 匹配对应经纬度的位置
      if (item.latitude === lat && item.longitude === lng) {
        return {
          ...item,
          title: newTitle,
          description: newDesc
        };
      }
      return item;
    }));
  };

  return (
    <View style={styles.container}>
      {/* 展示当前选中位置的信息 */}
      {selectedLocationInfo.title ? (
        <View style={styles.infoBox}>
          <Text>选中位置标题：{selectedLocationInfo.title}</Text>
          <Text>选中位置描述：{selectedLocationInfo.description}</Text>
        </View>
      ) : null}
      
      <MapView 
        style={styles.map}
        initialRegion={{
          latitude: 33.738045,
          longitude: 73.084488,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      >
        {/* 遍历state中的标记数据渲染 */}
        {markers.map((marker, index) => (
          <Marker 
            key={index}
            coordinate={{
              latitude: marker.latitude,
              longitude: marker.longitude
            }}
            pinColor={marker.pinColor}
            title={marker.title}
            description={marker.description}
            // 点击标记时获取对应属性存入state
            onPress={() => setSelectedLocationInfo({
              title: marker.title,
              description: marker.description
            })}
          />
        ))}
      </MapView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    width: '100%',
    height: '100%',
  },
  infoBox: {
    position: 'absolute',
    top: 20,
    left: 20,
    right: 20,
    backgroundColor: 'white',
    padding: 10,
    borderRadius: 8,
    zIndex: 99,
  }
});

export default AddLocation;

代码说明 #

• 所有标记点数据都存在markers state中，你可以随时调用updateLocationInfo方法传入对应经纬度和新的title、description，就可以修改指定位置的属性。
• 用户点击任意标记时，会触发onPress事件把对应标记的title和description存入selectedLocationInfo state中，你可以直接用这个state里的值做后续业务逻辑。

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