This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.
Expo 地图
一个在 Android 上提供访问 Google 地图、在 iOS 上提供访问 Apple 地图的库。
重要 此库目前处于 alpha 阶段，并且会频繁出现破坏性变更。 它在 Expo Go 应用中不可用 – 请使用开发构建来试用。
安装
If you are installing this in an existing React Native app, make sure to install expo in your project.
使用 expo-maps 库为你的 Expo 应用添加 Google Maps 和 Apple Maps。
配置
Expo Maps 提供对 Android 和 iOS 平台原生地图 API 的访问。
- Apple Maps（仅在 iOS上可用）。安装此包后无需额外配置即可使用。
- Google Maps（仅在 Android上可用）。虽然 Google 为 iOS 提供了 Google Maps SDK，但 Expo Maps 仅在 Android 上支持它。如果你想在 iOS 上使用 Google Maps，可以考虑使用替代库或自行编写。
Google Cloud API 设置
在 Android 上使用 Google Maps 之前，你需要注册一个 Google Cloud API 项目，启用 Android 版 Maps SDK，并将相关配置添加到你的 Expo 项目中。
在 Android 上设置 Google Maps
如果你已经在 Android 上为其他 Google 服务（例如 Google Sign In）注册了项目，那么只需在你的项目中启用 Maps SDK for Android，然后直接跳到第 4 步。
1
注册一个 Google Cloud API 项目并启用 Android 版 Maps SDK
- 在浏览器中打开 Google API Manager 并创建一个项目。
- 创建完成后，进入该项目并启用 Maps SDK for Android。
2
复制你应用的 SHA-1 证书指纹
- 如果你要将应用部署到 Google Play 商店，你需要至少先将应用二进制文件上传到 Google Play 控制台。这是 Google 生成应用签名凭据所必需的。
- 前往 Google Play Console >（你的应用）> 测试和发布 > 应用完整性 > Play 应用签名 > 设置 > 应用签名密钥证书。
- 复制 SHA-1 证书指纹 的值。
3
创建 API 密钥
- 前往 Google Cloud Credential Manager 并点击 创建凭据，然后选择 API Key。
- 在弹窗中，点击 编辑 API 密钥。
- 在 密钥限制 > 应用限制 下，选择 Android apps。
- 在 将使用限制为你的 Android 应用 下，点击 添加项目。
- 将 app.json 中的
android.package（例如：com.company.myapp）添加到包名字段中。 - 然后，添加第 2 步中的 SHA-1 certificate fingerprint 值。
- 点击 完成，然后点击 保存。
4
将 API 密钥添加到你的项目中
- 将你的 API Key 复制到 app.json 中的
android.config.googleMaps.apiKey字段下。 - 创建一个新的开发构建，现在你就可以在 Android 上使用
expo-maps的 Google Maps API 了。
权限
要在地图上显示用户的位置，你需要事先声明并请求定位权限。如果你在项目中使用 config plugins（Continuous Native Generation (CNG)），可以使用其内置的配置插件来进行配置。该插件允许你配置各种无法在运行时设置的属性，并且需要构建一个新的应用二进制文件后才会生效。如果你的应用不使用 CNG，那么你需要手动配置该库。
Example app.json with config plugin
Configurable properties
用法
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>地图仅在 Android 和 iOS 上可用</Text>; } }
API
import { AppleMaps, GoogleMaps } from 'expo-maps'; // ApplesMaps.View 和 GoogleMaps.View 是 React 组件
Components
Type: React.Element<Omit<AppleMapsViewProps, 'ref'>>
(event: {
bearing: number,
coordinates: Coordinates,
tilt: number,
zoom: number
}) => voidLambda invoked when the map was moved by the user.
(event: AppleMapsCircle) => voidLambda invoked when the circle is clicked
(event: {
coordinates: Coordinates
}) => voidLambda invoked when the user clicks on the map. It won't be invoked if the user clicks on POI or a marker.
(event: AppleMapsMarker) => voidLambda invoked when the marker is clicked
(event: AppleMapsPolygon) => voidLambda invoked when the polygon is clicked
(event: AppleMapsPolyline) => voidLambda invoked when the polyline is clicked
Ref<AppleMapsViewType>StyleProp<ViewStyle>AppleMapsUISettingsThe MapUiSettings to be used for UI-specific settings on the map.
Type: React.Element<Omit<GoogleMapsViewProps, 'ref'>>
GoogleMapsContentPaddingThe padding values used to signal that portions of the map around the edges may be obscured. The map will move the Google logo, etc. to avoid overlapping the padding.
GoogleMapsMapOptionsDefines configuration GoogleMapOptions for a GoogleMap
(event: {
bearing: number,
coordinates: Coordinates,
tilt: number,
zoom: number
}) => voidLambda invoked when the map was moved by the user.
(event: GoogleMapsCircle) => voidLambda invoked when the circle is clicked.
(event: {
coordinates: Coordinates
}) => voidLambda invoked when the user clicks on the map. It won't be invoked if the user clicks on POI or a marker.
(event: {
coordinates: Coordinates
}) => voidLambda invoked when the user long presses on the map.
(event: GoogleMapsMarker) => voidLambda invoked when the marker is clicked
(event: {
coordinates: Coordinates,
name: string
}) => voidLambda invoked when a POI is clicked.
(event: GoogleMapsPolygon) => voidLambda invoked when the polygon is clicked.
(event: GoogleMapsPolyline) => voidLambda invoked when the polyline is clicked.
Ref<GoogleMapsViewType>StyleProp<ViewStyle>GoogleMapsUISettingsThe MapUiSettings to be used for UI-specific settings on the map.
GoogleMapsUserLocationUser location, overrides default behavior.
Type: React.Element<GoogleStreetViewProps>
StreetViewCameraPositionStyleProp<ViewStyle>Hooks
Check or request permissions to access the location.
This uses both requestPermissionsAsync and getPermissionsAsync to interact with the permissions.
[null | PermissionResponse, RequestPermissionMethod<PermissionResponse>, GetPermissionMethod<PermissionResponse>]Example
const [status, requestPermission] = useLocationPermissions();
Methods
Checks user's permissions for accessing location.
Promise<PermissionResponse>A promise that fulfills with an object of type PermissionResponse.
Asks the user to grant permissions for location.
Promise<PermissionResponse>A promise that fulfills with an object of type PermissionResponse.
Types
Enums
The style of the polyline.
AppleMapsMapStyleElevation.AUTOMATIC ＝ "AUTOMATIC"The default elevation style, that renders a flat, 2D map.
The type of map to display.
AppleMapsMapType.HYBRID ＝ "HYBRID"A satellite image of the area with road and road name layers on top.
The type of map to display.
GoogleMapsMapType.HYBRID ＝ "HYBRID"Satellite imagery with roads and points of interest overlayed.
权限
Android
要在地图上显示用户的位置，expo-maps 库需要以下权限：
ACCESS_COARSE_LOCATION：用于获取大致设备位置ACCESS_FINE_LOCATION：用于获取精确设备位置
iOS
此库使用以下用途说明键：