未為 android 加載本機地圖（空白地圖）

Question

我已經被困在這個問題上很長時間了，並且開始認為也許 react native maps 無法在 android 模擬器上運行，因為我發現似乎適用的所有答案無論如何都適用於 IOS。

我目前正在使用 android 模擬器來運行我的應用程序。 這是一個簡單地圖的代碼......

class MainMap extends Component {
    constructor() {
    super();
  }
    render(){
        return (
            <View style={styles.container}>
            <MapView
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  />
  </View>
        )
    }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    position: 'absolute',
    top: 0,
    width:150,
    height:150,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

module.exports = MainMap;

代碼似乎應該可以工作，因為我直接從示例中獲取了它。 我什至從 google API 獲得了我的 API 密鑰，然后在我的AndroidManifest.xml添加了以下內容

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

現在，當我運行react-native run-android ，應用程序似乎運行良好，沒有錯誤消息。 但是，該應用程序是空白的。 View容器加載正常，但其內容MapView根本不加載。 我看到的只是一個空白屏幕。

請注意，我的模擬器上也安裝了 Google Play 服務和 Google API。

由於我根本沒有收到錯誤消息，我該如何調試這個問題？ react-native maps甚至可以在 android 模擬器react-native maps工作嗎？

編輯

我已經被困在這個問題上很長時間了，這讓我無法在我的這個項目上工作。 由於問題的性質很難調試，我將提供一個指向我的存儲庫的 github 鏈接，以防有人願意在他們的最后復制問題並查看我的問題是什么......

https://github.com/Bolboa/TTC-Mapping

我只需要加載地圖。 代碼看起來應該可以工作，但地圖無法加載...

我將懸賞任何能幫助我的人。

Answer 1

為MapView賦予樣式。

包括

var { width, height } = Dimensions.get('window')

在渲染方法中

<View style={styles.container}>
        <MapView style = {styles.mapcontainer}
          showsUserLocation={true}
          showsMyLocationButton={false}
          zoomEnabled = {true}
          region={this.state.region} >
        </MapView>
</View>

包含樣式

container: {
    flex: 1,
  },
mapcontainer: {
    flex: 1,
    width: width,
    height: height,
  },

Answer 2

出於某種原因，重新生成 API 密鑰並將其更新為：

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

為我修好了。 不知道如何因為兩者具有相同的設置..不再有帶有 Google 圖標的灰色屏幕！

Answer 3

您只是在創建具有map樣式的styles變量，但並未將該樣式應用於 MapView。 您需要添加以下行，它將樣式分配給 MapView

style={styles.map}

所以現在看起來像

<View style={styles.container}>
    <MapView
        style={styles.map}
        initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
       }}/>
</View>

還可以查看您錯過的故障排除部分，以包含第二部分。
如果即使在添加樣式后您也無法看到地圖，則說明您的密鑰有問題。

Answer 4

激活“Android 版地圖 SDK”和“iOS 版地圖 SDK”

1. 轉到 Google Cloud Platform Console。 https://cloud.google.com/console/google/maps-apis/overview

2. 使用頂部導航欄中的下拉菜單選擇您的項目。

3. 單擊菜單並轉到“API 和服務”>“庫”

4. 激活“Android 版地圖 SDK”和“iOS 版地圖 SDK”。

5. 然后創建新的 API 密鑰並將其添加到您的項目中的<application>標簽內的AndroidManifest.xml ：

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