[英]React-Native-Maps: Map is empty. Only shows Google logo and Marker
我正在使用react-native-maps ,版本是"react-native-maps": "0.27.1"
。
我能夠在2021 年 10 月 1 日星期五查看地圖。
但是,今天( 2021 年 10 月 4 日,星期一)我得到了帶有 Google 徽標的空白地圖和位置標記。
我嘗試從 react-native-maps (即google_maps_api.xml , PROVIDER_GOOGLE )進行故障排除,但它沒有解決問題。
它還提到它可能是 API KEY 問題,但我在這個項目第一次工作時一直使用相同的 API 密鑰(我也啟用了計費)。
我沒有對文件進行任何更改,也沒有添加任何新內容,但地圖仍然無法加載
我有另一個具有相同版本
"react-native-maps": "0.27.1"
,它似乎運行良好並顯示地圖。
這是我的代碼片段和其他文件:
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>
截屏:
從以下鏈接檢查您是否啟用了Maps SDK for Android
/ Maps SDK for IOS
。 由於 SDK 已禁用,因此地圖未顯示。
對於安卓:
截圖供參考:
對於IOS:
解決了
這確實是 Google Cloud Platform 上的 API 問題
在 iOS 中將 provider 屬性設置為DEFAULT_PROVIDER
為我修復
provider={ Platform.OS === 'ios' ? PROVIDER_DEFAULT : PROVIDER_GOOGLE }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.