将地图和地理定位功能整合到本地 Apps 中

位置意识移动应用程序已成为规范,为用户提供了个性化,背景化的经验. React Industrial,具有跨平台能力,为构建此类应用程序提供了坚实的基础. 整合地图和地理定位不仅可以增强用户参与,还可以解锁导航,基于位置的通知,近距离搜索等功能. 本文为在React Indust里嵌入地图和访问设备位置提供了全面的指南,涵盖了基本的图书馆,执行模式,平台特定考虑,以及性能最佳做法.

核心概念: 地图和地理定位

移动应用程序中的地图是地理数据的互动视觉表现。在React Industrial中,地图通常作为本地组件,由平台专用地图SDK(Android上的Google地图,iOS上的Apple地图,或通过自定义提供者的Google地图)支持。 地理定位是指使用GPS,Wi-Fi或蜂窝网络获取设备真实世界坐标(纬度,经度)的能力.

这些功能共同带动了广泛的使用案例:共享显示器、餐馆搜索器、健身跟踪器和交付跟踪。 React Industrial通过社区维护的图书馆来将本地SDK连接到JavaScript组件中,暴露出这些能力。

地图和地理定位大众图书馆

反应-内在-映射

React Industrial 中嵌入地图的事实上的标准,它通过统一的API支持Google地图和Apple地图,其特性包括自定义标记,呼号,多边形,多线,热映射,以及内置手势处理. 库被积极维护并被广泛采用.

反应-内置-地理定位-服务

React Industrial的核心 API仍然可用,但它被贬值,缺乏精细的控制。 react-native-Geolocation-Service[ 提供了现代的、基于承诺的替换,具有可配置的准确性、超时和许可处理。 它在iOS和Android之间始终如一地工作,并有适当的本土融合。

外出地点

对于世博会管理的项目,expo-location提供了简化的API,它处理权限、位置跟踪和箱外地理编码。 它简化了开发过程,但限制了本地代码的定制访问,即对不需要深平台集成的原型或应用的初始化或应用的实现。

其他值得注意的图书馆

  • 反应-内在-谷歌-谷歌-位置:提供自動完成,并来自Google Places API的位址细节.
  • 反应-内在-映射框-gl:提供自定义地图样式和离线牌(较少积极维护).
  • 反应-内在-映射-超聚:添加高效的标记集群来反应-内在映射.

详细比较,请参考反应-内在-映射[和反应-内在-地理-服务的正式文件.

在您的应用程序中执行地图

安装和设置

开始安装库并配置平台特定依赖性.

npm install react-native-maps
cd ios && pod install

如果您在Android上使用Google地图,请将您的 API 密钥添加到 上 :

<meta-data
 android:name="com.google.android.geo.API_KEY"
 android:value="YOUR_GOOGLE_MAPS_API_KEY" />

对于带有Google地图的iOS,请在或[中添加相同的密钥. 或者,Apple地图在框外工作,没有任何API密钥.

基本地图组件

核心组件为,接受一个]的道具,以定义初始可见区域:

import MapView from 'react-native-maps';

function MapScreen() {
 const region = {
 latitude: 37.78825,
 longitude: -122.4324,
 latitudeDelta: 0.0922,
 longitudeDelta: 0.0421,
 };

 return (
 <MapView style={{ flex: 1 }} region={region} />
 );
}

以 和 控制缩放级别。 更大的值显示的面积更大 。

添加标记和挂载

标记在地图上指定位置。 它们可以包括标题和描述, 被调用时显示为点名 :

import MapView, { Marker, Callout } from 'react-native-maps';

<MapView style={{ flex: 1 }} initialRegion={region}>
 <Marker
 coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
 title="Coffee Shop"
 description="Best espresso in town"
 >
 <Callout>
 <View>
 <Text>Coffee Shop</Text>
 <Text>Best espresso in town</Text>
 </View>
 </Callout>
 </Marker>
</MapView>

自定义标记和集群

使用 道具替换自定义视图的默认标记标:

<Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }}>
 <Image source={require('./custom-pin.png')} style={{ width: 40, height: 40 }} />
</Marker>

在处理上百或上千个标记时,使用分组来提高性能. Library like []] 自动处理分组和缩放级管理.

绘图形状: 多线和多边形

对于路线或边界,使用和]组件:

import MapView, { Polyline, Polygon } from 'react-native-maps';

<MapView>
 <Polyline
 coordinates={[
 { latitude: 37.78825, longitude: -122.4324 },
 { latitude: 37.78900, longitude: -122.4340 },
 ]}
 strokeColor="#000"
 strokeWidth={3}
 />
 <Polygon
 coordinates={[
 { latitude: 37.788, longitude: -122.432 },
 { latitude: 37.789, longitude: -122.432 },
 { latitude: 37.789, longitude: -122.433 },
 ]}
 fillColor="rgba(0, 125, 255, 0.3)"
 strokeColor="blue"
 />
</MapView>

绘制地图

程序上使用 或 [] 移动相机:

const mapRef = useRef(null);

const moveToLocation = (lat, lng) => {
 mapRef.current.animateToRegion({
 latitude: lat,
 longitude: lng,
 latitudeDelta: 0.01,
 longitudeDelta: 0.01,
 }, 1000); // duration in ms
};

访问用户位置

安装反应-内置-地理-服务

npm install react-native-geolocation-service
cd ios && pod install

库需要两个平台的许可设置。对于Android 6+,请使用 或像 ] 这样的专用库请求运行时间权限。在iOS上,请包含 或 键,请使用 ] 。

获得一个单一位置

import Geolocation from 'react-native-geolocation-service';

Geolocation.getCurrentPosition(
 (position) => {
 const { latitude, longitude } = position.coords;
 console.log(`User location: ${latitude}, ${longitude}`);
 },
 (error) => {
 console.warn(error.code, error.message);
 },
 { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
);

持续位置跟踪

实时移动(例如健身跟踪),使用[]:

const watchId = Geolocation.watchPosition(
 (position) => {
 setUserLocation(position.coords);
 },
 (error) => console.warn(error),
 { enableHighAccuracy: true, distanceFilter: 5, interval: 3000 }
);

// Later, when no longer needed:
Geolocation.clearWatch(watchId);

背景位置

对于即使在背景(如交付跟踪)中需要更新位置的应用程序,需要额外的步骤:

  • iOS:]启用背景模式[ 能力并检查“位置更新”。
  • Android:[] 使用一个带有持续通知的前景服务. 库]提供]和]公用事业.

在允许背景跟踪之前,始终获得适当的]许可,并明确告知用户遵守应用商店准则。

权限处理最佳做法

在用户有需要位置的背景后调用权限请求。 使用像 [[FLT: 35] ] 这样的库来管理跨平台权限 :

import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';
import { Platform } from 'react-native';

const requestLocationPermission = async () => {
 const permission = Platform.select({
 ios: PERMISSIONS.IOS.LOCATION_WHEN_IN_USE,
 android: PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
 });

 const result = await request(permission);
 return result === RESULTS.GRANTED;
};

优雅地处理拒绝问题——例如,显示一个提醒,解释为何需要定位,并引导用户进入系统设置.

处理错误和边缘案例

  • 被拒绝的 Penmission: 退回默认区域或促使用户从设置中启用位置.
  • 无法定位: 在室内丢失GPS信号时,使用]来接受缓存数据。显示“定位......”指示器。
  • 网络错误: 如果没有互联网,地图加载可能失败. Render a positions 或 offline message.
  • 时断:]设置一个合理的](例如15秒)并通知用户.

性能优化

减少不必要的重交

  • 提醒注意和]]的物体,以防止对每个状态变化重新做出响应.
  • 使用 ] 用于自定义标记等子组件.
  • 中调频或调空位置更新。

限制地图更新

  • 使用 ,以仅在用户移动最小距离时更新.
  • 当标记集不改变时, 避免将标记数据保存在 [[FLT: 44] ] 中, 重新将整个地图重放 。

管理集群

当显示许多标记时,允许只使用将当前视图中可见的标记分组或加载.

平台特定考虑因素

iOS 系统

  • Apple Maps不需要API密钥,但它缺乏一些Google Maps功能,如3D建筑和室内导航.
  • 对于iOS上的Google Maps,您必须添加的API密钥,并链接Google Maps SDK.
  • 记住要设置 用于本地化.

机器人

  • Google Maps 需要一个有效的 API 密钥在显示中。 从 Google Cloud Console 获取, 并启用“ Android 的 Maps SDK ” 。
  • 在某些装置上,模拟位置可以干扰——使用]进行探测。
  • 使用前景服务来查找背景位置。 应用程序必须显示一个通知才能存活 。

测试位置特征

  • 使用模拟器测试地图和模拟位置。在 Xcode 中,允许“模拟位置”设置任何坐标 。
  • 对于Android Studio,使用“极限控制”发送GPS数据。
  • 测试真实设备以验证GPS的准确性,权限对话框,以及背景跟踪行为.
  • 使用诸如或[]等工具,为许可逻辑和UI测试写出单位测试.

外部资源

结论

将地图和地理定位整合在React Industrial Apps中,可以将静态界面转化为动态的、了解位置的经验。 通过利用反应-内在地图和反应-内在-地理定位服务等强大的库,开发者可以添加丰富的地物地图、实时用户跟踪和无缝许可处理。 关注平台差异、性能优化和用户隐私可以确保一个抛光的、可靠的应用。 通过本文概述的模式和最佳做法,你有能力构建出可令用户满意的制作-即时定位特性。