react-native-maps

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

Android

iOS

Included in Expo Go

Bundled version:

1.20.1

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

使用 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, make sure to install expo in your project. Then, follow the installation instructions provided in the library's README or documentation.

用法

🌐 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 登录）注册了项目，请在你的项目上启用 Android 版 Maps SDK，然后跳到步骤 4。

注册一个 Google Cloud API 项目并启用 Android 版 Maps SDK

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

打开浏览器访问 Google API 管理器并创建一个项目。
创建完成后，进入项目并启用Android 地图 SDK。

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

🌐 Copy your app's SHA-1 certificate fingerprint

如果你要将应用发布到 Google Play 商店，你至少需要将应用二进制文件上传到 Google Play 控制台。这是 Google 生成应用签名凭证所必需的。
前往 Google Play 控制台 > (你的应用) > 发布 > 设置 > 应用完整性 > 应用签名。
复制 SHA-1 证书指纹的值。

如果你已经创建了开发构建，你的项目将使用调试密钥库进行签名。
构建完成后，前往你的项目仪表板，然后在配置 > 点击凭证。
在应用标识符下，点击你的项目包名，在 Android 密钥库下复制 SHA-1 证书指纹的值。

创建一个 API 密钥

🌐 Create an API key

前往 Google Cloud 凭据管理器，点击创建凭据，然后选择 API 密钥。
在弹出窗口中，点击编辑 API 密钥。
在关键限制 > 应用限制下，选择 Android 应用。
在限制使用于你的 Android 应用下，点击添加项目。
将你的 android.package 从 app.json（例如：com.company.myapp）添加到包名字段中。
然后，添加步骤 2 中 SHA-1 证书指纹的值。
点击完成，然后点击保存。

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

🌐 Add the API key to your project

将你的 API 密钥复制到你的 .env 文件中，然后在 app.json 的 android.config.googleMaps.apiKey 字段下添加它，或者直接复制它：

    "android": {
      "config": {
        "googleMaps": {
          "apiKey": "process.env.GOOGLE_MAPS_API_KEY",
        },
      },
    }

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

iOS

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

注册一个 Google Cloud API 项目并启用 iOS 的 Maps SDK

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

打开浏览器访问 Google API 管理器并创建一个项目。
然后，进入项目，点击启用 API 和服务并启用 iOS 地图 SDK。

创建一个 API 密钥

🌐 Create an API key

前往 Google Cloud 凭据管理器，点击创建凭据，然后选择 API 密钥。
在弹出窗口中，点击编辑 API 密钥。
在关键限制 > 应用限制下，选择 iOS 应用。
在接受来自具有以下其中一个打包标识符的 iOS 应用的请求下，点击添加项目按钮。
将你的 ios.bundleIdentifier 从 app.json（例如：com.company.myapp）添加到打包 ID 字段中。
点击完成，然后点击保存。

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

🌐 Add the API key to your project

将你的 API 密钥复制到你的 .env 文件中，然后在 app.json 的 ios.config.googleMapsApiKey 字段下添加它，或者直接复制它：

    "ios": {
      "config": {
        "googleMapsApiKey":  "process.env.GOOGLE_MAPS_API_KEY",
        },
      }

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