MapView

提供地图组件的库，该组件在 Android 上使用 Google 地图，在 iOS 上使用 Apple 地图或 Google 地图。

Android

iOS

该库在 Expo SDK 参考中列出，因为它包含在 Expo 中。你可以将你选择的任何库与开发构建一起使用。

react-native-maps 提供了一个地图组件，该组件在 Android 上使用 Google 地图，在 iOS 上使用 Apple 地图或 Google 地图。

¥react-native-maps provides a Map component that uses Google Maps on Android and Apple Maps or Google Maps on iOS.

使用 Expo Go 测试你的项目时无需额外设置。但是，要在应用商店中部署应用二进制文件，Google 地图还需要执行其他步骤。有关详细信息，请参阅下面的说明。

¥No additional setup is required when testing your project using Expo Go. However, to deploy the app binary on app stores additional steps are required for Google Maps. For more information, see the instructions below.

安装

¥Installation

Terminal

- npx expo install react-native-maps

If you are installing this in an existing React Native app (bare workflow), start by installing expo in your project. Then, follow the additional instructions as mentioned by library's README under "Installation in bare React Native projects" section.

用法

¥Usage

请参阅 react-native-maps/react-native-maps 处的完整文档。

¥See full documentation at react-native-maps/react-native-maps.

MapView

import React from 'react';
import MapView from 'react-native-maps';
import { StyleSheet, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <MapView style={styles.map} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    width: '100%',
    height: '100%',
  },
});

使用 Google 地图部署应用

¥Deploy app with Google Maps

安卓

¥Android

如果你已经在 Android 上注册了另一个 Google 服务的项目（例如 Google Sign In），则可以在你的项目上启用 Maps SDK for Android 并跳转到步骤 4。

¥If you have already registered a project for another Google service on Android, such as Google Sign In, you enable the Maps SDK for Android on your project and jump to step 4.

注册 Google Cloud API 项目并启用适用于 Android 的 Maps SDK

¥Register a Google Cloud API project and enable the Maps SDK for Android

打开浏览器到谷歌 API 管理器并创建一个项目。

¥Open your browser to the Google API Manager and create a project.
创建完成后，转到该项目并启用适用于 Android 的 Maps SDK。

¥Once it's created, go to the project and enable the Maps SDK for Android.

复制应用的 SHA-1 证书指纹

¥Copy your app's SHA-1 certificate fingerprint

如果你要将应用部署到 Google Play 商店，则需要至少将你的应用二进制文件上传到 Google Play 控制台一次。这是 Google 生成你的应用签名凭据所必需的。

¥If you are deploying your app to the Google Play Store, you'll need to upload your app binary to Google Play console at least once. This is required for Google to generate your app signing credentials.
转至谷歌游戏控制台 >（你的应用）> 发布 > 设置 > 应用完整性 > 应用签名。

¥Go to the Google Play Console > (your app) > Release > Setup > App integrity > App Signing.
复制 SHA-1 证书指纹的值。

¥Copy the value of SHA-1 certificate fingerprint.

如果你已经创建了开发构建，你的项目将使用调试密钥库进行签名。

¥If you have already created a development build, your project will be signed using a debug keystore.
构建完成后，转到项目的仪表板，然后在配置 > 单击凭据下。

¥After the build is complete, go to your project's dashboard, then, under Configure > click Credentials.
在“应用标识符”下，单击项目的包名称，然后在“Android 密钥库”下复制 SHA-1 证书指纹的值。

¥Under Application Identifiers, click your project's package name and under Android Keystore copy the value of SHA-1 Certificate Fingerprint.

创建 API 密钥

¥Create an API key

转到谷歌云凭证管理器并单击“创建凭证”，然后单击“API 密钥”。

¥Go to Google Cloud Credential manager and click Create Credentials, then API Key.
在模式中，单击“编辑 API 密钥”。

¥In the modal, click Edit API key.
在关键限制 > 应用限制下，选择 Android 应用。

¥Under Key restrictions > Application restrictions, choose Android apps.
在限制使用 Android 应用下，单击添加项目。

¥Under Restrict usage to your Android apps, click Add an item.
将 app.json 中的 android.package（例如：com.company.myapp）添加到包名称字段。

¥Add your android.package from app.json (for example: com.company.myapp) to the package name field.
然后，添加步骤 2 中的 SHA-1 证书指纹值。

¥Then, add the SHA-1 certificate fingerprint's value from step 2.
单击“完成”，然后单击“保存”。

¥Click Done and then click Save.

将 API 密钥添加到你的项目中

¥Add the API key to your project

将你的 API 密钥复制到 android.config.googleMaps.apiKey 字段下的 app.json 中。

¥Copy your API Key into your app.json under the android.config.googleMaps.apiKey field.
在你的代码中，从 react-native-maps 导入 { PROVIDER_GOOGLE } 并将属性 provider={PROVIDER_GOOGLE} 添加到你的 <MapView>。此属性适用于 Android 和 iOS。

¥In your code, import { PROVIDER_GOOGLE } from react-native-maps and add the property provider={PROVIDER_GOOGLE} to your <MapView>. This property works on both Android and iOS.
重新构建应用二进制文件（如果你的应用已上传，则重新提交到 Google Play 商店）。测试配置是否成功的一个简单方法是执行模拟器构建。

¥Rebuild the app binary (or re-submit to the Google Play Store in case your app is already uploaded). An easy way to test if the configuration was successful is to do an emulator build.

iOS 系统

¥iOS

如果你已经在 iOS 上注册了另一个 Google 服务的项目（例如 Google Sign In），则可以在你的项目上启用 Maps SDK for iOS 并跳转到步骤 3。

¥If you have already registered a project for another Google service on iOS, such as Google Sign In, you enable the Maps SDK for iOS on your project and jump to step 3.

注册 Google Cloud API 项目并启用适用于 iOS 的 Maps SDK

¥Register a Google Cloud API project and enable the Maps SDK for iOS

打开浏览器到谷歌 API 管理器并创建一个项目。

¥Open your browser to the Google API Manager and create a project.
然后，转到该项目，单击启用 API 和服务并启用 Maps SDK for iOS。

¥Then, go to the project, click Enable APIs and Services and enable the Maps SDK for iOS.

创建 API 密钥

¥Create an API key

转到谷歌云凭证管理器并单击“创建凭证”，然后单击“API 密钥”。

¥Go to Google Cloud Credential manager and click Create Credentials, then API Key.
在模式中，单击“编辑 API 密钥”。

¥In the modal, click Edit API key.
在关键限制 > 应用限制下，选择 iOS 应用。

¥Under Key restrictions > Application restrictions, choose iOS apps.
在“接受来自具有这些打包包标识符之一的 iOS 应用的请求”下，单击“添加项目”按钮。

¥Under Accept requests from an iOS application with one of these bundle identifiers, click the Add an item button.
将 app.json 中的 ios.bundleIdentifier（例如：com.company.myapp）添加到打包包 ID 字段。

¥Add your ios.bundleIdentifier from app.json (for example: com.company.myapp) to the bundle ID field.
单击“完成”，然后单击“保存”。

¥Click Done and then click Save.

将 API 密钥添加到你的项目中

¥Add the API key to your project

将你的 API 密钥复制到 ios.config.googleMapsApiKey 字段下的 app.json 中。

¥Copy your API key into app.json under the ios.config.googleMapsApiKey field.
在你的代码中，从 react-native-maps 导入 { PROVIDER_GOOGLE } 并将属性 provider={PROVIDER_GOOGLE} 添加到你的 <MapView>。此属性适用于 Android 和 iOS。

¥In your code, import { PROVIDER_GOOGLE } from react-native-maps and add the property provider={PROVIDER_GOOGLE} to your <MapView>. This property works on both Android and iOS.
重建应用二进制文件。测试配置是否成功的一个简单方法是执行模拟器构建。

¥Rebuild the app binary. An easy way to test if the configuration was successful is to do a simulator build.