[英]How to fix brown map with a logo of google using the (react-native-maps)
I'm new developing react-native, I have modules of tracking all the users based on there location (lat and long) now. 我是新开发的react-native,现在有基于该位置(纬度和经度)跟踪所有用户的模块。 I started installing the npm install react-native-maps --save, well the installation is good, now I started Build configuration on Android
我开始安装npm install react-native-maps --save,安装很好,现在我开始在Android上进行Build配置
Note:I use my mobile phone to run the application 注意:我使用手机运行该应用程序
Question: 题:
1.Is this working in all devices? 1.这适用于所有设备吗?
2.Is it issue on API key? 2.API密钥有问题吗?
3.Is it problem version of react-native-maps? 3.它是反应原生地图的问题版本吗?
I just follow the configuration in the documentation. 我只是按照文档中的配置。 https://github.com/react-native-community/react-native-maps/blob/master/docs/installation.md
https://github.com/react-native-community/react-native-maps/blob/master/docs/installation.md
Now i started creating my credentials in the 现在,我开始在
https://console.cloud.google.com https://console.cloud.google.com
Now in my AndroidManifest.xml 现在在我的AndroidManifest.xml中
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.tracker"> 包= “com.tracker”>
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
<meta-data android:name="com.google.android.geo.API_KEY" android:value="Keep Secret first"/>
</application>
In my app.js 在我的app.js中
IMPORT 进口
import MapView from 'react-native-maps';
RETURN 返回
<View style={styles.container}>
<MapView style = {styles.mapcontainer}
showsUserLocation={true}
showsMyLocationButton={false}
zoomEnabled = {true}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}} >
</MapView>
</View>
CSS CSS
const styles = StyleSheet.create({
container: {
flex: 1,
},
mapcontainer: {
flex: 1,
...StyleSheet.absoluteFillObject
},
});
Now the result is this, 现在的结果是
The debugger look like this 调试器看起来像这样
I hope someone can help me with the problem. 我希望有人可以帮我解决这个问题。 Thanks
谢谢
I think this issue because of SHA1 please add package name and SHA1 key on google api console. 我认为这个问题因为SHA1请在google api控制台上添加包名和SHA1密钥。
SHA1 key generate from android studio. SHA1键从android studio生成。 Get Key from here....
从这里获取密钥。
Add Package name and SHA 1 key here.... 在这里添加包名称和SHA 1密钥....
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.