This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

react-native-maps

一个提供 Map 组件的库，在 Android 上使用 Google Maps，在 iOS 上使用 Apple Maps 或 Google Maps。

Android

iOS

Included in Expo Go

GitHub

npm

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

使用 Expo Go 测试项目时不需要额外设置。不过，如果要将应用二进制文件部署到应用商店，则需要为 Google Maps 执行额外步骤。更多信息请参阅下面的说明。

安装

Terminal

- npx expo install react-native-maps

If you are installing this in an existing React Native app, make sure to install expo in your project. Then, follow the installation instructions provided in the library's README or documentation.

用法

请参阅 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 Maps 部署应用

Android

如果你已经为 Android 上的其他 Google 服务（例如 Google Sign In）注册了项目，则可以在你的项目中启用 Maps SDK for Android，然后跳到第 4 步。

注册 Google Cloud API 项目并启用 Maps SDK for Android

在浏览器中打开 Google API Manager 并创建一个项目。
创建完成后，进入该项目并启用 Maps SDK for Android。

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

如果你要将应用部署到 Google Play Store，你需要至少先将应用二进制文件上传到 Google Play 控制台。这是 Google 生成应用签名凭据所必需的。
前往 Google Play Console >（你的应用）> 测试和发布 > 应用完整性 > Play 应用签名 > 设置 > 应用签名密钥证书。
复制 SHA-1 certificate fingerprint 的值。

如果你已经创建了一个开发构建，你的项目将使用 debug keystore 进行签名。
构建完成后，前往你的项目仪表板，然后在 Configure 下点击 Credentials。
在 Application Identifiers 下，点击你项目的 package name，并在 Android Keystore 下复制 SHA-1 Certificate Fingerprint 的值。

创建 API key

前往 Google Cloud Credential manager，点击 Create Credentials，然后点击 API Key。
在弹窗中点击 Edit API key。
在 Key restrictions > Application restrictions 下，选择 Android apps。
在 Restrict usage to your Android apps 下，点击 Add an item。
将 app.json 中的 android.package（例如：com.company.myapp）添加到 package name 字段。
然后添加第 2 步中的 SHA-1 certificate fingerprint 的值。
点击 Done，然后点击 Save。

将 API key 添加到你的项目中

由于你使用 Google 作为地图提供方，因此需要将 API key 添加到 react-native-maps 的 config plugin 中。将你的 API Key 复制到项目中的 .env 文件里，或者直接复制后添加到应用配置的 plugins.react-native-maps.androidGoogleMapsApiKey 字段中，如下所示：

app.json

{
  "expo": {
    "plugins": [
      [
        "react-native-maps",
        {
          "androidGoogleMapsApiKey": "process.env.YOUR_GOOGLE_MAPS_API_KEY"
        }
      ]
    ]
  }
}

在代码中，从 react-native-maps 导入 { PROVIDER_GOOGLE }，并将属性 provider={PROVIDER_GOOGLE} 添加到你的 <MapView> 上。该属性在 Android 和 iOS 上均可使用。
重新构建应用二进制文件（如果应用已经上传，则需要重新提交到 Google Play Store）。测试配置是否成功的一个简单方法是进行模拟器构建。

iOS

如果你已经为 iOS 上的其他 Google 服务（例如 Google Sign In）注册了项目，则可以在你的项目中启用 Maps SDK for iOS，然后跳到第 3 步。

注册 Google Cloud API 项目并启用 Maps SDK for iOS

在浏览器中打开 Google API Manager 并创建一个项目。
然后进入该项目，点击 Enable APIs and Services 并启用 Maps SDK for iOS。

创建 API key

前往 Google Cloud Credential manager，点击 Create Credentials，然后点击 API Key。
在弹窗中点击 Edit API key。
在 Key restrictions > Application restrictions 下，选择 iOS apps。
在 Accept requests from an iOS application with one of these bundle identifiers 下，点击 Add an item 按钮。
将 app.json 中的 ios.bundleIdentifier（例如：com.company.myapp）添加到 bundle ID 字段。
点击 Done，然后点击 Save。

将 API key 添加到你的项目中

由于你使用 Google 作为地图提供方，因此需要将 API key 添加到 react-native-maps 的 config plugin 中。将你的 API Key 复制到项目中的 .env 文件里，或者直接复制后添加到应用配置的 plugins.react-native-maps.iosGoogleMapsApiKey 字段中，如下所示：

app.json

{
  "expo": {
    "plugins": [
      [
        "react-native-maps",
        {
          "iosGoogleMapsApiKey": "process.env.YOUR_GOOGLE_MAPS_API_KEY"
        }
      ]
    ]
  }
}

在代码中，从 react-native-maps 导入 { PROVIDER_GOOGLE }，并将属性 provider={PROVIDER_GOOGLE} 添加到你的 <MapView> 上。该属性在 Android 和 iOS 上均可使用。
重新构建应用二进制文件。测试配置是否成功的一个简单方法是进行模拟器构建。