React Native地图加载后标记不显示，拖动地图才出现

我在React Native中实现了一个函数式组件，组件加载时会检查用户位置权限，随后基于用户位置加载地图。当地图位置确定后，调用Google Maps API搜索附近门店，并在MapView中展示标记。

目前遇到的问题：API调用会在地图渲染时执行，但标记需要轻微拖动地图后才会显示。通过console.log可以看到，视图首次加载时API已发起调用，且返回结果已存入状态对象。

import React, { useState, useEffect, useCallback } from 'react';
import { View, Platform, StyleSheet } from 'react-native';
import Geolocation from 'react-native-geolocation-service';
import MapView, { Marker, Region } from 'react-native-maps';
import { request, PERMISSIONS } from 'react-native-permissions';
import debounce from 'lodash.debounce';

interface StoreFinderState {
  latitude: number;
  longitude: number;
  latitudeDelta: number;
  longitudeDelta: number;
}

const StoreFinderView: React.FC = () => {
  const [mapRegion, setMapRegion] = useState<StoreFinderState>({
    // 初始默认位置
    latitude: 41.88015,
    longitude: -87.63515,
    latitudeDelta: 0.05,
    longitudeDelta: 0.05,
  });

  const [stores, setStores] = useState<any[]>([]);

  const getLocation = useCallback(() => {
    Geolocation.getCurrentPosition(
      position => {
        console.log(position);
        setMapRegion({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          latitudeDelta: 0.05,
          longitudeDelta: 0.05,
        });
      },
      error => {
        console.log(error.code, error.message);
      },
      { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
    );
  }, []);

  useEffect(() => {
    const requestLocationPermission = async () => {
      const status = await request(
        Platform.OS === 'ios' ? PERMISSIONS.IOS.LOCATION_WHEN_IN_USE : PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION
      );
      if (status === 'granted') {
        getLocation();
      }
    };

    requestLocationPermission();
  }, []);


  useEffect(() => {
    searchStores(mapRegion);
  }, [mapRegion]);

  const searchStores = useCallback(
    debounce(async (region: Region) => {
      try {
        console.log('Search for stores');
        const response = await fetch(
          'https://maps.googleapis.com/maps/api/place/nearbysearch/json?' +
            `keyword=KEYWORD_SEARCH&location=${region.latitude}%2C${region.longitude}&radius=1500` +
            '&type=store&key=API_KEY',
          {
            method: 'GET',
          }
        );
        const data = await response.json();
        console.log(data.results.length);
        setStores(data.results);
      } catch (error) {
        console.log(error);
      }
    }, 500),
    []
  );

  return (
    <View style={styles.container}>
      <MapView
        style={styles.container}
        region={mapRegion}
        onRegionChangeComplete={(region) => {setMapRegion(region)}}
      >
        {stores.map((store: any) => (
          <Marker
            key={store.place_id}
            coordinate={{
              latitude: store.geometry.location.lat,
              longitude: store.geometry.location.lng,
            }}
            title={store.name}
            description={store.vicinity}
          />
        ))}
      </MapView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default StoreFinderView;

核心原因 #

1. 默认位置的无效API调用：组件初始化时mapRegion是默认位置，会触发第一次searchStores，但此时用户实际位置还在获取中，返回的门店不在用户当前地图视野内，导致标记不可见。
2. 防抖延迟影响首次加载：防抖函数的500ms延迟，会让首次基于用户实际位置的API调用被推迟，而拖动地图时的二次调用会覆盖首次请求，才会加载当前视野内的门店。

修改方案 #

1. 新增状态跟踪用户位置获取状态 #

添加hasUserLocation状态，避免默认位置触发无效API调用，仅当获取到用户实际位置（或权限被拒绝）后才执行搜索。

2. 拆分搜索逻辑 #

将搜索拆分为立即执行和防抖执行两个版本，首次获取用户位置时立即搜索，拖动地图时使用防抖避免频繁API调用。

修改后的完整代码 #

import React, { useState, useEffect, useCallback } from 'react';
import { View, Platform, StyleSheet } from 'react-native';
import Geolocation from 'react-native-geolocation-service';
import MapView, { Marker, Region } from 'react-native-maps';
import { request, PERMISSIONS } from 'react-native-permissions';
import debounce from 'lodash.debounce';

interface StoreFinderState {
  latitude: number;
  longitude: number;
  latitudeDelta: number;
  longitudeDelta: number;
}

// 为门店数据定义类型，替代any
interface Store {
  place_id: string;
  name: string;
  vicinity: string;
  geometry: {
    location: {
      lat: number;
      lng: number;
    };
  };
}

const StoreFinderView: React.FC = () => {
  const [mapRegion, setMapRegion] = useState<StoreFinderState>({
    latitude: 41.88015,
    longitude: -87.63515,
    latitudeDelta: 0.05,
    longitudeDelta: 0.05,
  });
  const [stores, setStores] = useState<Store[]>([]);
  const [hasUserLocation, setHasUserLocation] = useState(false);

  const getLocation = useCallback(() => {
    Geolocation.getCurrentPosition(
      position => {
        setMapRegion({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          latitudeDelta: 0.05,
          longitudeDelta: 0.05,
        });
        setHasUserLocation(true);
      },
      error => {
        console.log(error.code, error.message);
        // 位置获取失败时，允许基于默认位置搜索
        setHasUserLocation(true);
      },
      { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
    );
  }, []);

  useEffect(() => {
    const requestLocationPermission = async () => {
      const status = await request(
        Platform.OS === 'ios' ? PERMISSIONS.IOS.LOCATION_WHEN_IN_USE : PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION
      );
      if (status === 'granted') {
        getLocation();
      } else {
        // 权限被拒绝，基于默认位置搜索
        setHasUserLocation(true);
      }
    };

    requestLocationPermission();
  }, []);

  // 仅当获取到用户位置后，才执行搜索
  useEffect(() => {
    if (hasUserLocation) {
      searchStores(mapRegion);
    }
  }, [mapRegion, hasUserLocation]);

  // 基础搜索函数，无防抖
  const fetchStores = async (region: Region) => {
    try {
      const response = await fetch(
        `https://maps.googleapis.com/maps/api/place/nearbysearch/json?keyword=KEYWORD_SEARCH&location=${region.latitude},${region.longitude}&radius=1500&type=store&key=API_KEY`,
        { method: 'GET' }
      );
      const data = await response.json();
      setStores(data.results as Store[]);
    } catch (error) {
      console.log('门店搜索失败:', error);
    }
  };

  // 防抖版本的搜索函数，用于拖动地图场景
  const debouncedSearchStores = useCallback(
    debounce(async (region: Region) => {
      await fetchStores(region);
    }, 500),
    []
  );

  // 合并搜索逻辑：首次加载立即执行，拖动时防抖
  const searchStores = useCallback((region: Region) => {
    if (!hasUserLocation) {
      fetchStores(region);
    } else {
      debouncedSearchStores(region);
    }
  }, [hasUserLocation, debouncedSearchStores]);

  return (
    <View style={styles.container}>
      <MapView
        style={styles.container}
        region={mapRegion}
        onRegionChangeComplete={(region) => setMapRegion(region)}
      >
        {stores.map((store) => (
          <Marker
            key={store.place_id}
            coordinate={{
              latitude: store.geometry.location.lat,
              longitude: store.geometry.location.lng,
            }}
            title={store.name}
            description={store.vicinity}
          />
        ))}
      </MapView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default StoreFinderView;

• 类型安全：避免使用any类型，为所有数据定义明确的接口，提升代码可维护性。
• 加载状态：添加加载指示器，在API调用过程中提示用户，提升体验。
• 错误提示：API调用失败时，通过Toast或弹窗告知用户，而不是仅打印日志。
• API密钥安全：不要硬编码API密钥，使用react-native-dotenv等工具通过环境变量管理密钥。

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