React-native-maps空白页面只有Google标志

我花了好几天才弄明白这个问题。在我的情况下（Expo项目），缺少了来自Play Console的SHA-1证书指纹，我只有Expo的那一个。

简而言之

根据部署到Play商店文档的说明，我不仅需要添加expo fetch:android:hashes命令输出中的那个，还需要添加Google Play控制台 -> 您的应用程序 -> 发布管理 -> 应用签名中的那个SHA-1证书指纹。

因此，现在我在GCP凭据 -> 我的Maps SDK for Android API密钥 -> 限制使用于您的Android应用程序部分中有两条记录，都带有我的应用程序包名称。

我已经尝试了所有可能的解决方案，我的应用程序是在Expo中，问题出在API KEY的配置上。

解决方案

在Google Play控制台的API密钥配置中，包含两个限制：

一个包含使用expo fetch: android: hashes生成的指纹

另一个包含使用keytool -list -v -keystore "%USERPROFILE%\.Android\debug.keystore" -alias androiddebugkey -storepass android -keypass android生成的指纹

重要的是，这两个限制都具有相同的包名称。

前往您的

1. Google控制台开发人员帐户
2. 选择您对应的项目

Android

3. 启用Android地图SDK

iOS

3. 启用iOS地图SDK

import React, {useState, useEffect, useRef} from 'react';
import {StyleSheet, Text} from 'react-native';
import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';

import Geolocation from 'react-native-geolocation-service';

const GeoScreen = () => {
  const [newPosition, setNewPosition] = useState({
    latitude: 37.12,
    longitude: -122.1,
    latitudeDelta: 0.0421,
    longitudeDelta: 0.0421,
  });
  const mapRef = useRef();

  useEffect(() => {
    Geolocation.getCurrentPosition(pos => {
      const coord = pos.coords;
      console.log({coord: coord});

      setNewPosition({
        latitude: coord.latitude,
        longitude: coord.longitude,
        latitudeDelta: 0.1421,
        longitudeDelta: 0.1421,
      });
    });
  }, [mapRef]);

  console.log({newPosition: newPosition});

  return (
    <MapView
      ref={mapRef}
      provider={PROVIDER_GOOGLE}
      style={styles.map}
      region={newPosition}
      showsUserLocation={true}
      showsMyLocationButton={true}
    >
      <Marker
        title="Your title"
        coordinate={newPosition}
      />
    </MapView>
  );
};

const styles = StyleSheet.create({
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

export default GeoScreen;

✅ 我的疏忽错误是我复制粘贴代码时没有替换占位符 API 密钥。官方文档链接：https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md

1. npm i react-native-maps

2. 重要提示：不要忘记在 Google Cloud 平台上启用Android 地图 SDK和iOS 地图 SDK

3. 将您的API 密钥添加到清单文件中（android/app/src/main/AndroidManifest.xml）：

<application>
   <!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
   <meta-data
     android:name="com.google.android.geo.API_KEY"
     android:value="Your Google maps API Key Here"/> // ***HERE I NEED TO REPLACE MY KEY AND I FORGET
</application>

4. 这里是一个快速的代码片段，使其可视化

   import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps'; // remove PROVIDER_GOOGLE import if not using Google Maps    
   <MapView
       provider={PROVIDER_GOOGLE} // remove if not using Google Maps
       style={{
          height: 400,
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
       }}
       zoomEnabled={true}
       region={{
          latitude: 22.258,
          longitude: 71.19,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
       }}
    >
       <Marker
          coordinate={{ latitude: 22.258, longitude: 71.19 }}
          title={"title"}
          description={"test"}
       />
    </MapView>

如果这有帮助，请让我知道。

在你的代码中添加maxZoomLevel：

<MapView
        style={styles.map}
        maxZoomLevel={3}
        region={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.015,
          longitudeDelta: 0.0121,
        }}
      >
      </MapView>

 <MapView
      ref={mapView}
      provider={Platform.OS == "android" ? PROVIDER_GOOGLE : PROVIDER_DEFAULT}
      // provider={PROVIDER_DEFAULT}
      style={styles.map}
      region={region}
      mapType='standard'
      // mapType={Platform.OS == "android" ? "none" : "standard"}
      minZoomLevel={15}
      maxZoomLevel={20}
      onRegionChangeComplete={selectedRegion => {
        fetchLocationName(region, setLocation, autocompleteRef);
        setRegion(selectedRegion);
      }}
      // showsUserLocation={true}
      loadingEnabled={true}
      showsMyLocationButton={false}
      />