基于react-native-maps，如何从地点数组中获取距当前位置最近的地点？

这个需求在地图类应用里太常见了，我一步步给你拆解实现思路，附带完整可复用的代码示例。

第一步：实现坐标距离计算核心函数 #

因为地球是球体，不能直接用平面坐标的距离公式，我们需要用Haversine公式来计算两个经纬度之间的球面距离（默认单位是公里，可按需调整）。先写这个工具函数：

// 计算两个坐标之间的距离（单位：公里）
const calculateDistance = (lat1, lon1, lat2, lon2) => {
  const R = 6371; // 地球半径（公里，换成3956就是英里）
  const dLat = (lat2 - lat1) * Math.PI / 180;
  const dLon = (lon2 - lon1) * Math.PI / 180;
  const a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * 
    Math.sin(dLon/2) * Math.sin(dLon/2); 
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
  return R * c; // 返回距离值
};

第二步：筛选最近地点的两种实现逻辑 #

假设你已经拿到了当前位置currentLocation（结构是{ latitude: xxx, longitude: xxx }），以及地点数组places（每个元素包含经纬度和其他信息），下面两种方法任选其一：

方法1：用reduce直接找出最近地点（效率更高） #

不需要排序整个数组，一次遍历就能得到结果，适合只需要最近一个地点的场景：

// 假设你的当前位置数据
const currentLocation = {
  latitude: 37.7749,
  longitude: -122.4194
};

// 假设你的地点数组
const places = [
  { id: 1, name: "咖啡屋A", latitude: 37.7750, longitude: -122.4185 },
  { id: 2, name: "书店B", latitude: 37.7735, longitude: -122.4200 },
  { id: 3, name: "餐厅C", latitude: 37.7760, longitude: -122.4170 }
];

const findNearestPlace = (currentLoc, placesList) => {
  if (!placesList || placesList.length === 0) return null;

  return placesList.reduce((nearest, currentPlace) => {
    const currentDistance = calculateDistance(
      currentLoc.latitude,
      currentLoc.longitude,
      currentPlace.latitude,
      currentPlace.longitude
    );
    const nearestDistance = calculateDistance(
      currentLoc.latitude,
      currentLoc.longitude,
      nearest.latitude,
      nearest.longitude
    );
    return currentDistance < nearestDistance ? currentPlace : nearest;
  }, placesList[0]);
};

// 获取最近地点
const nearestPlace = findNearestPlace(currentLocation, places);
console.log("最近的地点：", nearestPlace);

方法2：给地点添加距离属性后排序（适合需要全量排序的场景） #

如果需要展示所有地点的距离并按远近排序，用这种方法更直观：

// 给每个地点添加distance字段，再按距离升序排序
const placesWithDistance = places.map(place => ({
  ...place,
  distance: calculateDistance(
    currentLocation.latitude,
    currentLocation.longitude,
    place.latitude,
    place.longitude
  )
})).sort((a, b) => a.distance - b.distance);

// 最近的地点就是数组第一个元素
const nearestPlace = placesWithDistance[0];
console.log("最近地点：", nearestPlace);
console.log("所有地点按距离排序：", placesWithDistance);

第三步：结合react-native-maps的完整组件示例 #

你可以把逻辑整合到地图组件中，比如在获取到当前位置和地点数据后自动计算，并用不同颜色标记最近地点：

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

const NearbyPlacesMap = () => {
  const [currentLocation, setCurrentLocation] = useState(null);
  const [places, setPlaces] = useState([]);
  const [nearestPlace, setNearestPlace] = useState(null);

  // 模拟获取当前位置和地点数据（实际项目中替换成真实的定位/接口请求）
  useEffect(() => {
    const mockCurrentLoc = { latitude: 37.7749, longitude: -122.4194 };
    setCurrentLocation(mockCurrentLoc);

    const mockPlaces = [
      { id: 1, name: "咖啡屋A", latitude: 37.7750, longitude: -122.4185 },
      { id: 2, name: "书店B", latitude: 37.7735, longitude: -122.4200 },
      { id: 3, name: "餐厅C", latitude: 37.7760, longitude: -122.4170 }
    ];
    setPlaces(mockPlaces);
  }, []);

  // 当位置或地点数据变化时，重新计算最近地点
  useEffect(() => {
    if (currentLocation && places.length > 0) {
      const nearest = findNearestPlace(currentLocation, places);
      setNearestPlace(nearest);
    }
  }, [currentLocation, places]);

  // 这里记得把前面的calculateDistance和findNearestPlace函数也复制进来

  return (
    <MapView
      style={{ flex: 1 }}
      initialRegion={{
        latitude: currentLocation?.latitude || 37.7749,
        longitude: currentLocation?.longitude || -122.4194,
        latitudeDelta: 0.01,
        longitudeDelta: 0.01,
      }}
    >
      {/* 当前位置标记 */}
      {currentLocation && (
        <Marker
          coordinate={currentLocation}
          title="我的位置"
          pinColor="blue"
        />
      )}
      {/* 所有地点标记，最近的用红色区分 */}
      {places.map(place => (
        <Marker
          key={place.id}
          coordinate={{ latitude: place.latitude, longitude: place.longitude }}
          title={place.name}
          description={`距离：${calculateDistance(
            currentLocation.latitude,
            currentLocation.longitude,
            place.latitude,
            place.longitude
          ).toFixed(2)}公里`}
          pinColor={place.id === nearestPlace?.id ? 'red' : 'green'}
        />
      ))}
    </MapView>
  );
};

export default NearbyPlacesMap;

几个注意点 #

• 如果地点数据量很大（比如上千条），建议在后端做距离筛选，前端计算可能会有性能损耗；
• 确保经纬度是有效的数值类型，避免出现NaN的计算结果；
• 可以根据需求调整距离单位（把公式里的R=6371换成3956就是英里）。

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