Expo 地图

一个提供对 Android 上的 Google 地图和 iOS 上的 Apple 地图的访问的库。

Expo Maps 目前处于 alpha 阶段，可能会发生重大变化。它在 Expo Go 应用中不可用。

安装

¥Installation

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

配置

¥Configuration

Expo Maps 提供对 Android 和 iOS 上平台原生地图 API 的访问。

¥Expo Maps provides access to the platform native map APIs on Android and iOS.

• Apple Maps（仅适用于

  iOS
  ）。安装此软件包后，无需额外配置即可使用它。

  ¥Apple Maps (available on

  iOS
  only). No additional configuration is required to use it after installing this package.

• Google 地图（仅在

  Android
  上可用）。虽然 Google 提供了适用于 iOS 的 Google Maps SDK，但 Expo Maps 仅在 Android 上支持它。如果你想在 iOS 上使用 Google 地图，你可以考虑使用 替代库 或 编写你自己的。

  ¥Google Maps (available on

  Android
  only). While Google provides a Google Maps SDK for iOS, Expo Maps supports it exclusively on Android. If you want to use Google Maps on iOS, you can look into using an alternative library or writing your own.

Google Cloud API 设置

¥Google Cloud API setup

在你可以在 Android 上使用 Google 地图之前，你需要注册一个 Google Cloud API 项目，启用 Android 版 Maps SDK，并将相关配置添加到你的 Expo 项目。

¥Before you can use Google Maps on Android, you need to register a Google Cloud API project, enable the Maps SDK for Android, and add the associated configuration to your Expo project.

权限

¥Permissions

要在地图上显示用户的位置，你需要事先声明并请求位置权限。如果你在项目中使用配置插件（EAS 构建 或 npx expo run:[android|ios]），则可以使用内置 配置插件 进行配置。该插件允许你配置无法在运行时设置的各种属性，并且需要构建新的应用二进制文件才能生效。

¥To display the user's location on the map, you need to declare and request location permission beforehand. You can configure this using the built-in config plugin if you use config plugins in your project (EAS Build or npx expo run:[android|ios]). The plugin allows you to configure various properties that cannot be set at runtime and require building a new app binary to take effect.

Example app.json with config plugin

{
"expo": {
  "plugins": [
    [
      "expo-maps",
      {
        "requestLocationPermission": "true",
        "locationPermission": "Allow $(PRODUCT_NAME) to use your location"
      }
    ]
  ]
}
}

Configurable properties

用法

¥Usage

import { AppleMaps, GoogleMaps } from 'expo-maps';
import { Platform, Text } from 'react-native';

export default function App() {
  if (Platform.OS === 'ios') {
    return <AppleMaps.View style={{ flex: 1 }} />;
  } else if (Platform.OS === 'android') {
    return <GoogleMaps.View style={{ flex: 1 }} />;
  } else {
    return <Text>Maps are only available on Android and iOS</Text>;
  }
}

API

import { AppleMaps, GoogleMaps } from 'expo-maps';

// ApplesMaps.View and GoogleMaps.View are the React components

Components

Hooks

const [status, requestPermission] = useLocationPermissions();

Methods

Types

Enums

权限

¥Permissions

安卓

¥Android

要在地图上显示用户的位置，expo-maps 库需要以下权限：

¥To show the user's location on the map, the expo-maps library requires the following permissions:

• ACCESS_COARSE_LOCATION：获取设备的大概位置

  ¥ACCESS_COARSE_LOCATION: for approximate device location

• ACCESS_FINE_LOCATION：用于精确的设备定位

  ¥ACCESS_FINE_LOCATION: for precise device location

iOS 系统

¥iOS

该库使用以下用法描述键：

¥The following usage description keys are used by this library: