【腾讯位置服务开发者征文大赛】腾讯位置服务 + React Native：地图、检索、规划、导航一条龙，附可运行 Demo

demo视频TencentMapDemo基于 react-native-tencent-map-kit 的可运行示例工程名TencentMapDemo· 依赖react-native-tencent-map-kitfile:../react-native-tencent-map-kit· React Native0.82.1· React19.1.1零、使用说明0.1 环境macOS同时开发 iOS 与 Android 时。Node.js ≥ 20与package.json中engines一致。Yarn 1仓库含packageManager字段。XcodeAndroid Studio配置ANDROID_HOME模拟器或真机。0.2 目录结构package.jsonreact-native-tencent-map-kit: file:../react-native-tencent-map-kit组件库与 Demo 位于同一父目录例如父目录/ TencentMapDemo/ react-native-tencent-map-kit/若缺少同级组件库yarn install会失败可将组件库放到该路径或把依赖改为 npm / git 地址。0.3 Key 与控制台在腾讯位置服务控制台创建 Key。Android 包名绑定com.rn.tencent.mapiOS 绑定 Xcode 中的 Bundle Identifier。在src/constants.ts填写TENCENT_WEB_SERVICE_KEY。App.tsx启动时调用configureTencentMapSdk与TencentMapService.configure均使用该常量。0.4 安装与 Metrocd TencentMapDemo yarn install yarn start保持 Metro 终端运行另开终端执行编译命令。0.5 Android启动模拟器或连接真机。执行yarn android。首次使用定位时在系统弹窗中授予权限工程内已调用ensureAndroidLocationPermission。0.6 iOS在仓库根目录执行yarn pod。用 Xcode 打开ios/TencentMapDemo.xcworkspace运行或执行yarn ios。授予定位权限。模拟器测试定位与路线时在 Features → Location → Custom Location 设置经纬度。0.7 首页标题「腾讯地图ReactNative 版本」下列三项进入子屏子屏顶部返回首页。0.8 地图样式首页进入「地图样式」。地图随initialCenter执行moveToRegion。底部「标准 / 卫星 / 夜间」切换mapType。使用指南针、比例尺、定位按钮、缩放控件。0.9 位置搜索 API首页进入「位置搜索 API」。搜索框默认「咖啡」修改关键词后点「演示 searchPoi」Modal 中选 POI以当前位置为起点规划到该点。点「演示 planRoute当前位置 → 演示终点」使用ROUTE_TO为终点。完成一次规划后切换「驾车 / 步行 / 骑行 / 公交」会按上次终点自动重算。「附近咖啡」「北京地铁」「演示 reverseGeocode」为固定示例入口。「回到地图中心」调用setCenter(initialCenter)。0.10 导航与路线规划首页进入「导航与路线规划」。搜索 → 选 POI → 自动规划或未选点时「发起路线规划默认终点」使用ROUTE_TO。切换出行方式立即重规划。「开始应用内导航」iOS 驾车优先startDriveNavigation否则定时刷新位置的轻量跟随并显示剩余距离。「停止」结束定时器并停止原生导航。0.11 自有工程接入yarn add react-native-tencent-map-kit或file:/ git 依赖。入口调用configureTencentMapSdk({ key })与TencentMapService.configure({ key })。iOSpod installAndroid按组件库说明配置 Gradle 与权限。页面中使用TencentMapView与TencentMapService路线返回体用与 Demo 相同的parseDirectionPolyline解析。0.12 常见问题白图检查 Key、包名与 Bundle ID、网络、configureTencentMapSdk是否执行。规划失败查看接口返回与 Key 权限、配额、起终点。公交折线异常使用包含steps[].lines[].polyline的解析逻辑。位置搜索 API 页切换方式无新路线需先成功规划一次产生lastRouteDest。yarn install报 engine升级 Node 或使用yarn install --ignore-engines。一、工程说明React Native 示例应用演示接入react-native-tencent-map-kit。DemoScreenIdhome、mapStyle、services、navigation。子屏通过ScreenHeader返回。App.tsx在进入子屏的useEffect中调用getCurrentPositionRn()更新initialCenter。二、首页入口文案与src/screens/HomeScreen.tsx中MENU一致。id标题副标题mapStyle地图样式标准 / 卫星 / 夜间services位置搜索 APIPOI 检索、逆地理、搜索结果弹窗选点navigation导航与路线规划出行方式切换、路线规划、轻量导航、原生导航三、地图样式屏MapStyleDemoScreen。ApiDemoIntro对应TencentMapView.mapType、uiControls、TencentMapViewRef.moveToRegion。mapType为standard/satellite/night对应原生 0/1/2。四、位置搜索 API 屏ServiceApiDemoScreen屏标题「位置服务 API」。APIsearchPoi、planRoute、reverseGeocode、markers/polylines、getCurrentPositionRn。默认搜索词「咖啡」。lastRouteDest用于切换TravelMode后自动重规划。五、导航与路线规划屏NavigationDemoScreen。searchPoi、planRoute、未选 POI 时终点为ROUTE_TO。切换方式调用planRoute(mode)。iOS 驾车startDriveNavigation轻量跟随使用remainingMetersAlongPolyline。卸载时stopDriveNavigation或NativeModules.TencentNavigationModule.stopDriveNavigation。六、constants.tsDEMO_CENTER纬度39.984104经度116.307503。ROUTE_FROM、ROUTE_TO演示路线起终点。TENCENT_WEB_SERVICE_KEYWebService 与 SDK 初始化。七、工具模块geolocationRn.tsWGS-84 转 GCJ-02。locationPermission.tsAndroid 运行时定位权限。parseDirectionPolyline.ts解析压缩 polyline公交合并steps[].polyline与steps[].lines[].polyline。八、原生配置摘要AndroidAndroidManifest.xml网络与定位权限applicationId/namespacecom.rn.tencent.map。iOSInfo.plist定位说明、UIBackgroundModes含location、LSApplicationQueriesSchemes含qqmap。九、命令速查cd TencentMapDemo yarn install yarn start yarn pod yarn ios yarn android十、部署检查控制台 Key 已绑定 Android 包名com.rn.tencent.map与 iOS Bundle ID。src/constants.ts中 Key 已填写。iOS 已执行yarn pod使用.xcworkspace编译。模拟器已设置自定义位置若需验证定位与路线。