如何使用react-native-maps将地图集成到React Native中

by Mukhamed Khasanza

由Mukhamed Khasanza

如何使用react-native-maps将地图集成到React Native中 (How to integrate maps in React Native using react-native-maps)

Nowadays, almost all mobile applications have a maps feature. I had to integrate Google Maps to my React Native application, and the only choice was react-native-maps by Airbnb (it’s the only one still supported by the React Native community).

如今，几乎所有移动应用程序都具有地图功能。 我必须将Google Maps集成到我的React Native应用程序中，唯一的选择是Airbnb的react-native-maps(这是React Native社区唯一仍支持的地图)。

I found several tutorials on how to set up this library, but none fully worked for me. This was because I had to run on both iOS and Android platforms and also support Google Maps for iOS.

我找到了一些有关如何设置该库的教程，但没有一个对我完全有用。 这是因为我必须同时在iOS和Android平台上运行，并且还必须支持iOS版Google Maps。

Let’s create a React Native application from scratch using react-native-cli to show, step by step, how everything is installed. If you want to integrate react-native-maps for your existing app, skip Step 1.

让我们使用react-native-cli从头开始创建一个React Native应用程序，以逐步展示所有安装方式。 如果要为现有应用程序集成react-native-maps，请跳过步骤1 。

步骤1：安装和设置React Native应用程序 (Step 1: Install and set up React Native application)

If you haven’t installed the React Native command line interface, run: npm install -g react-native-cli. Now you can create your project, simply using: react-native init ReactNativeMaps

如果尚未安装React Native命令行界面，请运行： npm install -g react-native-cli 。 现在，您只需使用以下命令即可创建您的项目： react-native init ReactNativeMaps

Here are the dependency versions at the time of building this project:

以下是构建此项目时的依赖项版本：

• “react”: “16.6.1”
  “React”：“ 16.6.1”
• “react-native”: “0.57.5”
  “本机”：“ 0.57.5”
• “react-native-maps”: “0.22.1” — we will install this one later.
  “ react-native-maps”：“ 0.22.1”-我们将在以后安装此版本。

Now you can try to run your app, react-native run-ios or react-native run-android . Usually, this works without any problems.

现在，您可以尝试运行您的应用程序， react-native run-ios或react-native run-android 。 通常，这可以正常工作。

第2步：添加并链接react-native-maps包 (Step 2: Add and Link react-native-maps package)

Now let’s install react-native-map: npm install --save react-native-maps after installing the package you should link it to your native apps: react-native link react-native-maps.

现在让我们安装react-native-map： npm install --save react-native-maps安装包后，您应该将其链接到本机应用程序： react-native link react-native-maps 。

步骤3：设定Apple Maps(iOS) (Step 3: Set up Apple Maps (iOS))

It will be easier if we set them up separately by platform, so let’s first do it on iOS. Before integrating Google Maps, we will check if Apple Maps works correctly. Add the following code to your current rendering component where you want to render your MapView.

如果我们按平台分别设置它们会更容易，那么让我们首先在iOS上进行设置。 在集成Google Maps之前，我们将检查Apple Maps是否正常工作。 将以下代码添加到要在其中渲染MapView的当前渲染组件。

import MapView from 'react-native-maps'

export default class App extends Component<Props> {  render() {    return (      <MapView        style={{flex: 1}}        region={{          latitude: 42.882004,          longitude: 74.582748,          latitudeDelta: 0.0922,          longitudeDelta: 0.0421        }}        showsUserLocation={true}      />    );  }}

You can test whatever location you want, just specify the appropriate Latitude and Longitude. As you can see, I enabled user location simply by adding the showUserLocation prop to the MapView component. If you are running on the real device you will see your current location.

您只需指定适当的纬度和经度，即可测试所需的任何位置。 如您所见，我只需将showUserLocation添加到MapView组件即可启用用户位置。 如果您在真实设备上运行，则会看到当前位置。

So, as you can see, by default Apple Maps is already working. More than that, if you linked everything correctly and enabled the user location, it’s actually done a lot of things for us (the user permission for the location with a default message). If you came from native iOS development, then you probably know what is an info.plist file.

因此，如您所见，默认情况下，Apple Maps已经可以使用。 更重要的是，如果您正确链接了所有内容并启用了用户位置，那么实际上它为我们做了很多事情(该位置的用户权限带有默认消息)。 如果您来自本地iOS开发，那么您可能知道什么是info.plist文件。

第4步：安装Cocoapods和“ GoogleMaps”软件包(iOS) (Step 4: Install Cocoapods and ‘GoogleMaps’ package (iOS))

Apple Maps was easy, right? Agreed — so let’s see what Google Maps has for us. We have to install Google Maps SDK for iOS. We will use Cocoapods. If you haven’t used it before, run sudo gem install cocoapods.

苹果地图很简单，对吧？ 同意-现在让我们看看Google Maps为我们提供的服务。 我们必须安装iOS版Google Maps SDK。 我们将使用Cocoapods。 如果您以前从未使用过它，请运行sudo gem install cocoapods 。

Now you have to create a Podfile where you will specify the dependencies of your iOS application. Navigate to your iOS/ folder in your React Native app and run: pod init or you can use touch Podfile you should have something similar to this:

现在，您必须创建一个Podfile，在其中您将指定iOS应用程序的依赖项。 导航到您的React Native应用程序中的iOS /文件夹并运行： pod init或者您可以使用touch Podfile您应该有类似以下内容：

# platform :ios, '9.0'

target 'ReactNativeMaps' do

# Pods for ReactNativeMaps

pod 'GoogleMaps'

end

As you can see, I added the pod GoogleMaps and now we have to install it. If you are still on iOS/ folder, run: pod install . If you try to run it now, you will probably get an error:

如您所见，我添加了Pod GoogleMaps，现在我们必须安装它。 如果您仍在iOS /文件夹中，请运行： pod install 。 如果尝试立即运行它，可能会收到错误消息：

Okay, let’s do what it wants. Now we should open xCode workspace.

好吧，让我们做它想要的。 现在，我们应该打开xCode工作区。

Navigate to AirGoogleMaps folder from node_modules/

从node_modules /导航到AirGoogleMaps文件夹

And drag it to the top of your xCode project

并将其拖到xCode项目的顶部

Please try to build your xCode project, if you are failing

如果失败，请尝试构建您的xCode项目

You should add HAVE_GOOGLE_MAPS=1Preprocessor Macro to Build Settings

您应该将HAVE_GOOGLE_MAPS=1预处理器宏添加到构建设置

第5步：获取Google Maps API密钥，使用Google Maps运行iOS应用 (Step 5: Get Google Maps API key, Run iOS app with Google Maps)

So now we have to generate a Google Maps API key.

因此，现在我们必须生成一个Google Maps API密钥 。

Copy your API key and add to AppDelegate.m file.

复制您的API密钥并添加到AppDelegate.m文件。

#import <GoogleMaps/GoogleMaps.h>

#import <GoogleMaps/GoogleMaps .h>

[GMSServices provideAPIKey:@"YOUR_API_KEY"]

[GMSServices provideAPIKey:@"YOUR_API_KEY"]

Now you can tell your MapView component that you are ready to use Google Maps.

现在，您可以告诉MapView组件您可以使用Google地图了。

Oh yesss, please run your iOS app. And you will get Google Maps.

哦，是的，请运行您的iOS应用。 然后您将获得Google地图。

I hope.

我希望。

第6步：让我们现在尝试Android (Step 6: Let’s try Android now)

Okay now we can quit xCode and let’s just try react-native run-android. If you are getting the same as this:

好的，现在我们可以退出xCode，让我们尝试一下react-native run-android 。 如果您得到与此相同的信息：

check your android/app/build.gradle file. And replace this:

检查您的android / app / build.gradle文件。 并替换为：

compile project(':react-native-maps') with this:

compile project(':react-native-maps') ，如下所示：

implementation(project(':react-native-maps')){        exclude group: 'com.google.android.gms', module: 'play-services-base'        exclude group: 'com.google.android.gms', module: 'play-services-maps'    }implementation 'com.google.android.gms:play-services-base:12.0.0'implementation 'com.google.android.gms:play-services-maps:12.0.0'

Oh, and don’t forget to add API_KEY to AndroidManifest.xml file.

哦，别忘了将API_KEY添加到AndroidManifest.xml文件。

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

Yes, now your app is running on both platforms. Please check the react-native-maps repo for more fun things that you can do with your MapView component.

是的，现在您的应用程序可以在两个平台上运行。 请检查react-native-maps存储库，以获取您可以使用MapView组件执行的更多有趣的操作。

结论 (Conclusion)

Hope my first article on Medium was helpful for you. Please, if you see any mistakes don’t hesitate to leave a comment, I will appreciate your comments!

希望我有关Medium的第一篇文章对您有所帮助。 请，如果您发现任何错误，请随时发表评论，我们将不胜感激！

翻译自: https://www.freecodecamp.org/news/how-to-integrate-maps-in-react-native-using-react-native-maps-5745490fe055/