React-Native-Maps：地图为空。仅显示 Google 徽标和标记

Posted 2023-02-16

技术标签:

【中文标题】React-Native-Maps：地图为空。仅显示 Google 徽标和标记【英文标题】：React-Native-Maps: Map is empty. Only shows Google logo and Marker 【发布时间】：2021-11-25 02:52:35 【问题描述】：

我使用的是react-native-maps，版本是"react-native-maps": "0.27.1"。

我能够在 2021 年 10 月 1 日星期五查看地图。

但是，今天（2021 年 10 月 4 日，星期一）我得到了带有 Google 徽标的空白地图和位置标记。

我尝试了 react-native-maps 中的 troubleshooting（即 google_maps_api.xml、PROVIDER_GOOGLE），但并没有解决问题。

它还提到它可能是 API KEY 问题，但我在这个项目第一次工作时一直使用相同的 API 密钥（我也启用了计费）。

我没有对文件进行任何更改，也没有添加任何新内容，但地图仍然无法加载

我有另一个具有相同版本的项目"react-native-maps": "0.27.1"，它似乎运行良好并显示地图。

这是我的代码 sn-p 和其他文件：

MapScreen.js：

import React, Component from 'react';
import View, StyleSheet from 'react-native';
import MapView, Marker from 'react-native-maps';

class DeliveryRoute extends Component 
  constructor(props) 
    super(props);
    this.state = 
      region: 
        latitude: parseFloat(5.3302),
        longitude: parseFloat(103.1408),
        latitudeDelta: 0.002,
        longitudeDelta: 0.002,
      ,
    ;
  

  renderMap() 
    return (
      <View style=styles.flex>
        <MapView
          style=styles.map
          initialRegion=this.state.region>
          <Marker coordinate=this.state.region pinColor="red" />
        </MapView>
      </View>
    );
  

  render() 
    return <>this.renderMap()</>;
  


const styles = StyleSheet.create(
  flex: 
    flex: 1,
  ,
  map: 
    ...StyleSheet.absoluteFillObject,
  ,
);

export default DeliveryRoute;

android\build.gradle：

buildscript 
    ext 
        buildToolsVersion = "29.0.2"
        minSdkVersion = 21
        compileSdkVersion = 29
        targetSdkVersion = 29
    
    repositories 
        google()
        jcenter()
    
    dependencies 
        classpath("com.android.tools.build:gradle:4.0.0")

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    


allprojects 
    repositories 
        mavenLocal()
        maven 
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        
        maven 
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        

        google()
        jcenter()
        maven  url 'https://www.jitpack.io'

android\app\build.gradle：

android\app\src\main\AndroidManifest.xml：

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.skydrivesolution.foodtigerdriver">
  <uses-permission android:name="android.permission.INTERNET"/>
  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
  <uses-permission android:name="android.permission.VIBRATE"/>
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
  <uses-permission android:name="android.permission.WRITE_SETTINGS"/>
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
  <uses-permission android:name="android.permission.WAKE_LOCK"/>
  <uses-permission android:name="com.google.android.c2dm.permission.RECEIVE"/>
  <application android:usesCleartextTraffic="true" android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme">
    <meta-data android:name="expo.modules.updates.EXPO_UPDATE_URL" android:value="https://exp.host/@dimovdaniel/foodtiger"/>
    <meta-data android:name="expo.modules.updates.EXPO_SDK_VERSION" android:value="40.0.0"/>
    <meta-data android:name="expo.modules.updates.ENABLED" android:value="true"/>
    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
    <meta-data android:name="com.google.android.geo.API_KEY" android:value="xxx"/>
    <uses-library android:name="org.apache.http.legacy" android:required="false"/>
    <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:screenOrientation="portrait">
      <intent-filter>
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
      </intent-filter>
      <intent-filter>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme="com.skydrivesolution.foodtigerdriver"/>
      </intent-filter>
    </activity>
    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
  </application>
</manifest>

截图：

【问题讨论】：

【参考方案1】：

检查您是否从以下链接启用了Maps SDK for Android/Maps SDK for ios。由于 SDK 已禁用，因此地图未显示。

对于 Android：

https://console.cloud.google.com/apis/library/maps-android-backend.googleapis.com?authuser=2&project=robotic-tract-330912&supportedpurview=project

截图供参考：

对于 IOS：

https://console.cloud.google.com/apis/library/maps-ios-backend.googleapis.com?authuser=2&project=robotic-tract-330912&supportedpurview=project

【讨论】：

【参考方案2】：

已解决