React Native Expo项目中Google Map无法显示的求助

1. 核心问题：地图缺少初始显示区域 #

你的MapView未配置region或initialRegion属性，即便开启了followsUserLocation，组件初始化时没有默认的地图显示范围，直接导致地图无法渲染。

修复代码：

import { StyleSheet, Text, View, Image } from "react-native";
import MapView, { Marker, PROVIDER_GOOGLE } from "react-native-maps";
import * as Location from 'expo-location';
import React, { useState, useEffect, useRef } from "react";
import { carsAround } from "../../dummyData/data";

const RegularMapView = () => {
  const [latlong, setLatlong] = useState({});
  const [region, setRegion] = useState({
    // 给一个默认初始区域，避免加载空白
    latitude: 37.4219983,
    longitude: -122.084,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  });
  const _map = useRef(null);

  const requestLocationPermission = async () => {
    const { status } = await Location.requestForegroundPermissionsAsync();
    if (status !== 'granted') {
      console.error("Location permission denied");
      return false;
    }
    return true;
  };

  const getLocation = async () => {
    try {
      const hasPermission = await requestLocationPermission();
      if (!hasPermission) return;

      const { coords: { latitude, longitude } } = await Location.getCurrentPositionAsync();
      const newRegion = {
        latitude,
        longitude,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      };
      setLatlong({ longitude, latitude });
      setRegion(newRegion);
      console.log("User coordinates:", { latitude, longitude }); // 直接打印实时坐标，避免异步延迟问题
    } catch (err) {
      console.error("Error getting location:", err);
    }
  };

  useEffect(() => {
    getLocation();
  }, []);

  return (
    <View style={[styles.container, styles.map]}>
      <MapView
        ref={_map}
        provider={PROVIDER_GOOGLE}
        showsUserLocation={true}
        followsUserLocation={true}
        region={region} {/* 新增：绑定地图显示区域 */}
      >
        {carsAround.map((item, index) => (
          <Marker coordinate={item} key={index.toString()}>
            <Image
              source={require('../../assets/images/carMarker.png')}
              resizeMode="cover"
              style={styles.carsAround}
            />
          </Marker>
        ))}
      </MapView>
    </View>
  );
};

export default RegularMapView;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: "100%",
    height: "100%",
    justifyContent: "center",
    alignItems: "center",
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
  carsAround: {
    width: 30,
    height: 30, // 补充Marker图片样式，避免显示异常
  }
});

2. 无效配置清理 #

你在MapView中使用了customMapStyle={styles.mapStyle}，但styles中并未定义mapStyle，这会导致样式错误，直接删除该属性即可（如果不需要自定义地图样式）。

3. iOS平台API Key补全 #

你的app.json仅配置了Android的Google Maps API Key，iOS需要单独添加：

{
  "expo": {
    // ...其他配置
    "ios": {
      "supportsTablet": true,
      "config": {
        "googleMapsApiKey": "你的iOS Google Maps API Key" // 新增这一行
      }
    },
    // ...其他配置
  }
}

4. 额外检查项 #

• 确保carsAround数组中的每个对象都包含latitude和longitude字段，格式如下：

  export const carsAround = [
    { latitude: 37.422, longitude: -122.083 },
    { latitude: 37.423, longitude: -122.085 }
  ];
  

• 验证你的Google Maps API Key是否启用了Maps SDK for Android和Maps SDK for iOS服务，且未设置错误的应用包名/IP限制。

内容的提问来源于stack exchange，提问作者taribi isaac