React-native-maps 空白頁面 只有谷歌標志

Question

我一直在嘗試為 react-native 安裝谷歌地圖一個星期，但仍然沒有成功。 我已經搜索並嘗試了 react-native-maps github 問題中的解決方案，但我仍然得到一個空白頁面。

我所做的：

react-native init myapp
npm install
yarn add react-native-maps
react-native link react-native-maps

在谷歌控制台 APIs -> 創建新項目 -> 啟用谷歌地圖 Android API，谷歌地圖 JavaScript API 和地點 API -> 創建憑證

在 AndroidManifest.xml

    <application>
....
       <meta-data
          android:name="com.google.android.geo.API_KEY"
          android:value="XXX"/>
    </application>

package.json

    {
    "name": "maps",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "16.0.0",
        "react-native": "0.50.4",
        "react-native-maps": "^0.18.3"
    },
    "devDependencies": {
        "babel-jest": "21.2.0",
        "babel-preset-react-native": "4.0.0",
        "jest": "21.2.1",
        "react-test-renderer": "16.0.0"
    },
    "jest": {
        "preset": "react-native"
    }
}

應用程序.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';
import MapView from 'react-native-maps'

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
      <MapView
        style={styles.map}
        region={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.015,
          longitudeDelta: 0.0121,
        }}
      >
      </MapView>  
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

編輯：因為有些人問我堆棧跟蹤：示例 1

Answer 1

您能否提供一些堆棧跟蹤，以便我們可以更好地了解您的問題？ 您的問題描述聽起來像是您的手機未連接到互聯網，這就是未呈現地圖的原因。

無論如何，這里有一些技巧可以根據我過去的經驗來運行react-native-maps 。

• 首先，始終根據此處的官方文檔配置您的 Android 應用程序。
• 確保通過控制台生成了 Google Maps API 密鑰。
• 檢查您的react-native-maps是否與您的react-native版本兼容。
• 檢查您的 android 構建工具版本。
• 如果您使用的是 Genymotion（舊版本）的 android 模擬器，請確保包含 Google Play 服務，否則 Map 將無法工作。
• 活躍的互聯網連接。 確保您的手機或模擬器已連接以加載地圖（iOS 沒有互聯網訪問也很好）。
• 始終將latlong對象注入initialRegion道具，以便地圖知道要關注的位置。

Answer 2

給那些擁有帶有Google 徽標的空白地圖視圖的朋友的建議。 我花了一整天的時間來解決這個問題。 最后我意識到，地圖實際上可以工作，但在第一次運行時完全縮放。 我以為它是空白頁，但實際上它是空白區域 :) 僅供參考

Answer 3

確保您在 Google Console 中啟用 API 密鑰以與Maps SDK for Android ，如果您想為 iOS 啟用Maps SDK for iOS

Answer 4

我花了一整天嘗試谷歌提供的解決方案，但似乎遺留元數據對我不起作用，所以我在AndroidManifest.xml更改了下面的行

<meta-data
 android:name="com.google.android.geo.API_KEY"
 android:value="Your Google maps API Key Here"/>

到

<meta-data
    android:name="com.google.android.maps.v2.API_KEY"
    android:value="Your Google maps API Key Here"/>

最后地圖出現了。

當然Maps SDK for Android必須在Google Api Console 中啟用。 以下是為初學者啟用Maps SDK for Android的步驟：

1. 轉到Google Api 控制台。

2. 在屏幕的左上角，就在Google Apis徽標的右側，您會看到您的項目名稱，選擇正確的項目名稱，然后在項目名稱下方，您會看到一個藍色文本+ ENABLE APIS AND SERVICES 。 點擊它。

3. 在打開的網頁中，向下滾動以找到Maps SDK for Android 。 單擊以啟用它。

Answer 5

在大多數情況下，它與兩個問題有關：

1. API 密鑰不正確
2. 谷歌開發者控制台未啟用相應的API

我按照這篇文章創建 API 密鑰並啟用 api。 它突然起作用了。 之前它曾經像你說的那樣只顯示谷歌標志。

Answer 6

我一直在努力應對 Android 和 iOS 平台的本機地圖。

在 Android 上有 Google API 版本。 我嘗試使用 Google API 27 不起作用，但 API 26 很好。

我在以下位置找到的提示： https : //github.com/react-community/react-native-maps/issues/1877#issuecomment-353261669

在 iOS 上是包版本：當我使用 CRNA 創建應用程序時，安裝了 react-native@0.52.0 並且與 react-native-maps@0.20.1 不兼容所以我將 react-native 更改為版本 0.53.0 並且解決了在構建時應用程序崩潰並出現錯誤的問題：條目，“：CFBundleIdentifier”，不存在。

Answer 7

為我工作。 可能它也適合你。

1) 移除 containerStyle 和 View。 使用下面的代碼

 mapStyle: {
    height: 400,
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },

2) mapView 代碼替換為

<MapView
      provider={PROVIDER_GOOGLE} // remove if not using Google Maps
      style={mapStyle}
      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"}
      icon={image}
      />
    </MapView>

Answer 8

經過一周的搜索和環顧，我通過從 android 項目目錄生成 SHA1 指紋解決了這個問題

keytool -list -v -keystore /Users/username/ProjecFolder/android/app/debug.keystore  -alias androiddebugkey -storepass android -keypass android

代替

keytool -list -v -keystore ~/.android/debug.keystore  -alias androiddebugkey -storepass android -keypass android

Answer 9

我遇到了同樣的問題。最后，我在將 minsdkVersion 設置為 18 之后得到了它，之前是 19。 這對我有用。

Answer 10

我花了幾天時間才弄明白這一點。 就我而言（Expo 項目），它缺少SHA-1 證書指紋，即 Play Console 中的指紋。 我在那里只有世博會。

TL; 博士

根據部署到播放商店部分的文檔，我不得不添加另一個 SHA-1 證書指紋。 不僅來自expo fetch:android:hashes命令輸出的，還有來自Google Play Console -> Your App -> Release management -> App signature 的。

所以現在我的記錄中有兩條記錄： GCP 憑據-> 我的Maps SDK for Android API 密鑰 -> 將使用限制到您的 Android 應用程序部分，兩者都帶有我的應用程序包名稱。

Answer 11

我一直在嘗試所有可能的解決方案，就我而言，應用程序在 Expo 中，問題在於 API KEY 的配置。

解決方案

在 Google Play Console 中的 API Key 配置中，包括兩個約束：

一個包含使用expo fetch: android: hashes生成的指紋expo fetch: android: hashes

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

兩個限制具有相同的包名很重要

Answer 12

我遇到了同樣的問題。 但我在任何地方都找不到正確的解決方案。

我在彈出 form expo 后遇到了這個問題。

我的問題與地圖鍵有關。 我在android studio的日志中清楚地發現了這一點。 然后我從 Google 的憑據管理中刪除所有限制。 （將應用程序限制設置為無）

如果你看到此時可以看到地圖，50% 就完成了。

就我而言，這是“包名稱和 SHA-1 簽名證書”的問題，我運行了默認的，即

"keytool -list -v -keystore "%USERPROFILE%.android\\debug.keystore" -alias androiddebugkey -storepass android -keypass android"

我為其他項目獲得的結果（我認為）然后我轉到項目目錄（項目 root\\android\\app）中的 app 文件夾，在那里我看到了“debug.keystore”文件。 然后我跑了這個

keytool -list -v -keystore "debug.keystore" -alias androiddebugkey -storepass android -keypass android

我得到了不同的結果。 我將它應用於限制，它對我有用。

我認為這可能對某些人有所幫助。

Answer 13

Go 到您的

1. 谷歌控制台開發者帳戶
2. Select 您的項目

Android

3. 為 Android 啟用地圖 SDK

iOS

3. 為 iOS 啟用地圖 SDK

Answer 14

經過一番研究，發現這段代碼對我有用。 我注意到不同之處在於創建了一個useRef() object 並將其添加為依賴項。 我也將initialRegion更改為region ：

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;

Answer 15

✅ 我的疏忽錯誤是我在沒有替換占位符 API 鍵的情況下復制粘貼代碼。 來自官方文檔： https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md

1. npm i react-native-maps

2.重要提示：不要忘記在 Google 雲平台上為Android啟用Map SDK，為 iOS啟用 Map 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>

讓我知道這是否有幫助。