有没有人能够将 react-native-maps 与谷歌地图一起使用？

Question

我目前有一个使用 react-native-maps 和 Viro 的 react-native 项目。 Viro 需要 rn 0.59.9 的 rn 版本，所以我在这个项目中没有使用最新版本。

目前已设置为在使用 iPhone 模拟器时使用原生苹果地图，该模拟器运行良好，而且 Viro 也可以正常工作。下一步是开始添加从当前用户位置到他们周围不同地方的路线，我计划使用谷歌地图来做到这一点。

不幸的是，我在尝试执行此操作时遇到了很多问题，并且无法通过 installation documentation 工作。

我的 package.json 目前看起来像这样：

{
  "name": "LoveWinchester",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "postinstall": "jetifier -r"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "react": "16.8.3",
    "react-native": "0.59.9",
    "react-native-gesture-handler": "~1.4.0",
    "react-native-maps": "0.26.1",
    "react-native-reanimated": "^1.4.0",
    "react-native-screens": "^1.0.0-alpha.23",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^1.10.3",
    "react-viro": "2.17.0",
    "rn-bottom-drawer": "^1.4.3"
  },
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/runtime": "^7.7.2",
    "babel-jest": "^24.9.0",
    "jest": "^24.9.0",
    "jetifier": "^1.6.4",
    "metro-react-native-babel-preset": "^0.57.0",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

我的 Podfile 如下所示：

target 'LoveWinchester' do
platform :ios, '9.3'
  pod 'ViroReact', :path => '../node_modules/react-viro/ios/'
  pod 'ViroKit_static_lib', :path => '../node_modules/react-viro/ios/dist/ViroRenderer/static_lib'
  pod 'RNReanimated', :path => '../node_modules/react-native-reanimated'

  pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'

  pod 'RNScreens', :path => '../node_modules/react-native-screens'

  pod 'react-native-maps', :path => '../node_modules/react-native-maps'

end

任何帮助将不胜感激！

Answer 1

1. 添加了 pod GoogleMaps

pod 'GoogleMaps'

然后转到 iOS 文件夹 & 安装它

cd ios
pod install

1. 现在，您可能会收到错误消息react-native-maps: AirGoogleMaps dir must be added to your xCode project to support GoogleMaps on iOS.
   

为了解决这个问题，请转到 iOS 文件夹并打开您的 .xcworkspace 文件，因为现在您需要添加 AirGoogleMaps 到项目中。

进入项目中的 node_modules 并导航到 AirGoogleMaps 文件夹。

/node_modules/react-native-maps/lib/ios/AirGoogeMaps

将 AirGoogleMaps 文件夹拖到您的项目中。将该文件夹放入您的项目后，将出现一个弹出窗口，您可以在其中指定创建组。 （不创建文件夹引用）

1. 然后进入 xcode > build settings > Preprocessor Macros > 并添加 HAVE_GOOGLE_MAPS=1 预处理器宏到构建设置
2. 要使用 Google 地图，您需要创建一个Google Maps API key。

之后转到 AppDelegate.m 并将以下行添加到您的代码中

#import <GoogleMaps/GoogleMaps.h>

[GMSServices provideAPIKey:@"YOUR_API_KEY"]

5. 最后，更改您的MapView component

import MapView, {PROVIDER_GOOGLE} from "react-native-maps";

<MapView provider={PROVIDER_GOOGLE} />

就是这样。希望这会帮助你。如有疑问，请随意。

欲了解更多信息check this