React Native Maps获取当前位置异常：模拟器显示Googleplex位置求助

嘿，我之前也踩过这个坑！模拟器默认确实会把Googleplex的坐标当成默认位置，咱们从几个方面来排查解决：

1. 直接修改模拟器的自定义位置 #

这是最快见效的方法：

• iOS模拟器：
  顶部菜单栏选择 Debug -> Location，你可以选预设的位置（比如City Bicycle Ride、Freeway Drive），或者选 Custom Location 输入你想要的经纬度。
• Android模拟器：
  点击模拟器右侧的「三个点」图标打开Extended Controls，切换到 Location 标签页，输入目标经纬度后点击「Send」，或者直接从预设列表里选一个位置。

2. 确认权限配置是否完整 #

你只提到了添加ACCESS_FINE_LOCATION，但不同系统还有其他必填配置：

• Android端：
  在AndroidManifest.xml里除了ACCESS_FINE_LOCATION，还要加上：

  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  <!-- 如果你的App需要在后台获取位置，Android 10+还要加这个 -->
  <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
  

  另外，Android 6.0+需要动态请求权限，不能只靠Manifest配置，比如用PermissionsAndroid来请求：

  import { PermissionsAndroid } from 'react-native';
  
  const requestLocationPermission = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
        {
          title: "位置权限请求",
          message: "我们需要获取你的位置来展示地图",
          buttonNeutral: "稍后再说",
          buttonNegative: "取消",
          buttonPositive: "允许"
        }
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log("位置权限已获取");
        // 这里调用获取位置的方法
      } else {
        console.log("位置权限被拒绝");
      }
    } catch (err) {
      console.warn(err);
    }
  };
  

• iOS端：
  必须在Info.plist里添加权限描述，否则App会崩溃或者无法请求位置：

  <!-- 前台获取位置 -->
  <key>NSLocationWhenInUseUsageDescription</key>
  <string>需要你的位置来展示地图</string>
  <!-- 如果需要后台获取位置 -->
  <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
  <string>需要你的位置来提供后台定位服务</string>
  

3. 检查你的位置获取代码逻辑 #

从你给出的代码片段看，你用了react-native-maps，但获取位置的部分没贴全。这里给你一个标准的获取当前位置的示例（用React Native内置的Geolocation）：

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

class MapScreen extends Component {
  state = {
    region: null,
  };

  componentDidMount() {
    this.requestLocationPermission();
  }

  requestLocationPermission = async () => {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
      {
        title: "位置权限请求",
        message: "我们需要获取你的位置来展示地图",
        buttonPositive: "允许"
      }
    );
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      this.getCurrentLocation();
    }
  };

  getCurrentLocation = () => {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const { latitude, longitude } = position.coords;
        this.setState({
          region: {
            latitude,
            longitude,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          },
        });
      },
      (error) => console.log(error.message),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
    );
  };

  render() {
    return (
      <View style={styles.container}>
        {this.state.region && (
          <MapView
            style={styles.map}
            region={this.state.region}
          >
            <Marker coordinate={this.state.region} title="我的位置" />
          </MapView>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    width: '100%',
    height: '100%',
  },
});

export default MapScreen;

4. 小提示 #

• 修改模拟器位置后，记得重新加载你的App（可以用Cmd+R或Ctrl+R），有时候模拟器不会实时刷新位置。
• 如果用的是第三方位置库（比如react-native-geolocation-service），要确保库的配置正确，部分库需要额外的原生配置。

内容的提问来源于stack exchange，提问作者Taha J