如何在React Native中用Mapbox实现类Uber/Grab的居中标记选点器

核心实现逻辑 #

• 将定位图标通过绝对定位固定在屏幕正中央，脱离地图层级，不随地图移动
• 仅监听地图的onDragEnd事件，拖动结束时获取当前地图中心点坐标，作为选中位置
• 缩放地图时不会触发onDragEnd，因此选中位置保持不变，完全符合需求

完整代码示例 #

import React, { useState } from 'react';
import { View, StyleSheet, Image } from 'react-native';
import MapboxGL from '@rnmapbox/maps';

// 替换为你的Mapbox Access Token
MapboxGL.setAccessToken('YOUR_MAPBOX_TOKEN');

const LocationPicker = () => {
  const [selectedCoord, setSelectedCoord] = useState({
    latitude: 37.78825,
    longitude: -122.4324,
  });

  // 拖动地图结束后更新选中坐标
  const handleMapDragEnd = (e) => {
    const newCenter = e.nativeEvent.coordinate;
    setSelectedCoord(newCenter);
    // 此处可添加逆地理编码，将坐标转为具体地址
  };

  return (
    <View style={styles.container}>
      <MapboxGL.MapView
        style={styles.map}
        onDragEnd={handleMapDragEnd}
        initialCamera={{
          center: selectedCoord,
          zoom: 15,
        }}
      >
        {/* 可选：在地图上标记选中坐标，与中央图标对应 */}
        <MapboxGL.PointAnnotation
          coordinate={selectedCoord}
          id="selected-point"
        />
      </MapboxGL.MapView>

      {/* 固定在屏幕中央的定位图标 */}
      <View style={styles.centerMarkerWrapper}>
        <Image
          source={require('./assets/location-pin.png')} // 替换为你的图标资源
          style={styles.centerMarker}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
  centerMarkerWrapper: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    // 根据图标尺寸调整偏移，确保图标中心与屏幕中心重合
    transform: [{ translateX: -25 }, { translateY: -50 }],
    zIndex: 10,
  },
  centerMarker: {
    width: 50,
    height: 50,
    resizeMode: 'contain',
  },
});

export default LocationPicker;

可选优化：逆地理编码获取地址 #

如果需要把选中坐标转换为具体地址，可使用Mapbox的Geocoding API或@rnmapbox/maps的Geocoder组件：

import { Geocoder } from '@rnmapbox/maps';

// 在组件中添加Geocoder
<Geocoder
  accessToken={MapboxGL.getAccessToken()}
  onResults={(res) => {
    if (res.features.length > 0) {
      console.log('选中地址:', res.features[0].place_name);
    }
  }}
  input={`${selectedCoord.latitude},${selectedCoord.longitude}`}
/>

注意事项 #

• 中央图标使用绝对定位，zIndex需高于地图，确保始终可见
• 若需实时预览中心点坐标，可监听onCameraChanged事件，但建议添加防抖处理，避免频繁更新
• 确保已正确配置Mapbox Access Token，否则地图无法加载

内容的提问来源于stack exchange，提问作者Trịnh Minh