使用 react-native-maps 未显示谷歌地图/空白

Posted

技术标签:

【中文标题】使用 react-native-maps 未显示谷歌地图/空白【英文标题】:Google map not shown/blank using react-native-maps 【发布时间】:2019-02-27 06:54:28 【问题描述】:

我正在使用 react-native-maps 在我的页面中显示 Mapview,不幸的是它在 Iphone 中工作,但在 android 中没有显示 Mapview,它只显示徽标,是的,我遵循了文档中提到的所有配置步骤。

    安装 react-native-maps 使用:

    npm install react-native-maps --save
    

    链接地图:

    react-native link react-native-maps
    

    查看 android/settings.gradle 中的 react-native-maps 项目:

    include ':react-native-maps'
    project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')
    

    android/app/build.gradle 中检查您的应用程序的依赖项:

    dependencies 
        ...
        compile project(':react-native-maps')
        ...
    
    

    查看android/build.gradle:

    ext 
        buildToolsVersion = "27.0.3"
        minSdkVersion = 16
        compileSdkVersion = 27
        targetSdkVersion = 26
        supportLibVersion = "27.1.1"
        googlePlayServicesVersion = "11.8.0"
        androidMapsUtilsVersion = "0.5+"
    
    

    android/app/src/main/AndroidManifest.xml 中指定您的 Google Maps API 密钥:

      <meta-data 
          android:name="com.google.android.maps.v2.API_KEY"
          android:value="MY API KEY"/>
    

这是我的package.json 文件依赖项

"dependencies": 
    "accordion-collapse-react-native": "^0.1.6",
    "buffer": "^5.2.1",
    "react": "16.6.0-alpha.8af6728",
    "react-native": "0.57.3",
    "react-native-calendars": "^1.21.0",
    "react-native-check-box": "^2.1.5",
    "react-native-chooser": "^1.7.0",
    "react-native-datepicker": "^1.7.2",
    "react-native-map-link": "^2.1.6",
    "react-native-maps": "^0.23.0",
    "react-native-maps-directions": "^1.6.0",
    "react-native-modal-datetime-picker": "^6.0.0",
    "react-native-modal-dropdown": "^0.6.2",
    "react-native-photo-upload": "^1.3.0",
    "react-native-popover-tooltip": "^1.1.4",
    "react-native-popup-dialog": "^0.15.1",
    "react-native-rating": "^2.0.4",
    "react-native-searchable-dropdown": "^1.0.5",
    "react-native-side-menu": "^1.1.3",
    "react-native-vector-icons": "^6.0.2",
    "react-navigation": "^2.12.0"
  ,

【问题讨论】:

【参考方案1】:

在元数据标签中使用它而不是 v2:

android:name="com.google.android.geo.API_KEY"

【讨论】:

谢谢您的回复,但我有权限问题,我已经解决了 我也面临同样的问题。您能告诉我您添加了哪些权限吗? 在 AdroidMenifest.xml 中添加“

以上是关于使用 react-native-maps 未显示谷歌地图/空白的主要内容,如果未能解决你的问题,请参考以下文章

使用未声明的标识符“AIRGoogleMapOverlay”react-native-maps

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

无法在 react-native-map 中安装 google map pod

react-native-maps :如何在放大和缩小时获取动态 latitudeDelta 和 longitudeDelta 值

为啥谷歌分析显示未知(未设置)位置?

react-native-maps@0.29.3: Android - 空地图