Google 地图未在 React Native Expo 项目中显示

Question

这是我正在开发的一个 React Native (Expo) 项目，我正在尝试在此组件中渲染 Google 地图，但尽管一切都正确且没有任何错误，但它没有显示。 下面是我的代码：

import { StyleSheet, Text, View, Image } from "react-native";
import MapView, { Marker, PROVIDER_GOOGLE } from "react-native-maps"; // Import MapView
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 _map = useRef(null);

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

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

      const { coords: { latitude, longitude } } = await Location.getCurrentPositionAsync();
      setLatlong({ longitude, latitude });
      console.log("User coordinates:", latlong);
    } catch (err) {
      console.error("Error getting location:", err);
    }
  };

  useEffect(() => {
    getLocation(); // Call getLocation on component mount
  }, []);

  return (
    <View style={[styles.container, styles.map]}>
      <MapView
        ref={_map}
        provider={PROVIDER_GOOGLE}
        customMapStyle={styles.mapStyle}
        showsUserLocation={true}
        followsUserLocation={true}
      >
        {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,
    
    
  },
});

这是我的app.json：

{
  "expo": {
    "name": "****",
    "slug": "*******",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/appIcon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/images/icon.png",
      "resizeMode": "contain",
      "backgroundColor": "#000066"
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive.png",
        "backgroundColor": "#000066"
      },
      "package": "com.rodnav",
      "config": {
        "googleMaps": {
          "apiKey": "*************"
        },
        "permissions": [
          "ACCESS_COARSE_LOCATION",
          "ACCESS_FINE_LOCATION",
          "FOREGROUND_SERVICE"
        ]
      }
    },
    "web": {
      "favicon": "./assets/images/icon.png"
    },
    "extra": {
      "eas": {
        "projectId": "***********"
      }
    },
    "plugins": [
      "expo-font"
    ]
  }
}

我可以在控制台中成功显示我的位置坐标，这意味着设置正在工作，但是地图仍然没有显示。

 LOG  User coordinates: {"latitude": 37.4219983, "longitude": -122.084}
 LOG  User coordinates: {"latitude": 37.4219983, "longitude": -122.084}
 LOG  User coordinates: {"latitude": 37.4219983, "longitude": -122.084}
 LOG  User coordinates: {"latitude": 37.4219983, "longitude": -122.084}
 LOG  User coordinates: {"latitude": 37.4219983, "longitude": -122.084}
 LOG  User coordinates: {"latitude": 37.4219983, "longitude": -122.084}

Answer 1

问题不在于您的代码。您可能在 Google Cloud Console 中添加了对 api 密钥的限制。访问您的 google 云平台>您的项目>API 和服务>凭据>API 密钥。编辑您在项目中使用的 API 密钥，然后在“设置应用程序限制”中选择“无”，然后在“API 限制”中选择“不限制 API”。