React Native+Expo开发：Google Maps显示与Marker不显示问题求助

问题描述 #

我使用Expo、VS Code和Android Studio学习React Native，尝试通过Google Maps实现带标记的位置图片功能，但遇到两个问题：

• Android Studio中无法显示地图以选择位置
• iPhone的Expo Go中选择位置后，地图上不显示Marker

问题截图 #

相关代码 #

获取地图图片的代码

export function getMapPreview(lat, lng) {
  const imagePreviewUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${lat},${lng}&zoom=13&size=400x200&maptype=roadmap&markers=color:red%7Clabel:S%7C${lat},${lng}
  &key=${GOOGLE_API_KEY}`;

  return imagePreviewUrl;
}

Map页面代码

import { useCallback, useLayoutEffect, useState } from "react";
import { StyleSheet, Alert } from "react-native";
import MapView, { Marker } from "react-native-maps";

import IconButton from "../components/UI/IconButton";

export default function Map({navigation}) {
  const [selectedLocation, setSelectedLocation] = useState();

  const region = {
    latitude: 37.56,
    longitude: 126.97,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421
  }

  function selectLocationHandler(event) {
    console.log(event);
    const lat = event.nativeEvent.coordinate.latitude;
    const lng = event.nativeEvent.coordinate.longitude;

    setSelectedLocation({lat: lat, lng: lng})
  }

  const savePickedLocationHandler = useCallback(() => {
    if (!selectedLocation) {
      Alert.alert(
        "No location picked",
        'You have to pick a loacation (by tapping on the map) first!'
      )

      return;
    }

    navigation.navigate('AddPlace', { pickedLat: selectedLocation.lat, pickedLng: selectedLocation.lng })
  }, [navigation, selectedLocation])

  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: ({tintColor}) => (
        <IconButton icon="save" size={24} color={tintColor} onPress={savePickedLocationHandler} />
      )
    })
  }, [navigation, savePickedLocationHandler])

  return (
    <MapView style={styles.map} initialRegion={region} onPress={selectLocationHandler}>
      {selectedLocation &&
        <Marker
          title="Picked Location"
          coordinate={{latitude: selectedLocation.lat,longitude: selectedLocation.lng}}
        />
      }
    </MapView>
  )
}

const styles = StyleSheet.create({
  map: {
    flex: 1
  }
})

解决方案 #

针对Android Studio地图不显示问题 #

1. 验证API密钥与服务启用
   • 登录Google Cloud控制台，确保已启用Maps SDK for Android和Maps Static API；检查API密钥是否正确配置到app.json的android.config.googleMaps.apiKey字段。
   • 若API密钥设置了应用限制，确认Android项目的包名（如com.yourprojectname）已添加到允许列表。
2. 配置Android权限与依赖
   • 执行npx expo install expo-maps确保依赖安装正确。
   • 本地构建时，在android/app/src/main/AndroidManifest.xml中添加权限和API密钥配置：

     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
     <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
     <application>
       <meta-data
         android:name="com.google.android.geo.API_KEY"
         android:value="你的Google Maps API密钥" />
     </application>
     

3. 检查模拟器环境
   • 确保Android模拟器已安装并更新Google Play服务，可通过模拟器内的Google Play应用检查更新。

针对iPhone Expo Go Marker不显示问题 #

1. 优化Marker组件配置
   • 在selectLocationHandler中打印selectedLocation，确认坐标值是否正确获取。
   • 给Marker添加identifier属性，帮助React识别组件更新：

     <Marker
       identifier="picked-location"
       title="Picked Location"
       coordinate={{latitude: selectedLocation.lat, longitude: selectedLocation.lng}}
     />
     

2. 确保依赖版本兼容
   • 检查expo-maps版本与当前Expo SDK版本是否匹配，可参考Expo官方文档，执行npx expo upgrade expo-maps更新到兼容版本。
3. 配置iOS位置权限
   • 在app.json中添加权限描述：

     "ios": {
       "infoPlist": {
         "NSLocationWhenInUseUsageDescription": "需要访问您的位置以显示地图和选择地点"
       }
     }
     

   • 打开iPhone的设置，确认Expo Go已被授予位置访问权限。

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