这是我正在开发的一个 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}
问题不在于您的代码。您可能在 Google Cloud Console 中添加了对 api 密钥的限制。访问您的 google 云平台>您的项目>API 和服务>凭据>API 密钥。编辑您在项目中使用的 API 密钥,然后在“设置应用程序限制”中选择“无”,然后在“API 限制”中选择“不限制 API”。