鸿蒙原生开发手记徒步迹 - MapKit 地图组件集成集成鸿蒙地图服务实现路线展示和位置定位一、前言地图是徒步 App 的核心功能。鸿蒙提供了 MapKit 地图组件支持地图展示、标记、路线绘制、定位等功能。二、准备工作2.1 申请 API Key在华为开发者联盟 - App Services - 地图服务 中申请 API Key。2.2 配置权限// module.json5 { requestPermissions: [ { name: ohos.permission.LOCATION, reason: 用于记录徒步轨迹和显示当前位置 }, { name: ohos.permission.APPROXIMATELY_LOCATION, reason: 用于记录徒步轨迹和显示当前位置 }, { name: ohos.permission.INTERNET, reason: 加载地图数据 } ] }2.3 配置 API Key// build-profile.json5 { app: { hms: { apiKey: your_api_key_here } } }三、基础地图组件3.1 显示地图import { MapComponent, MapOptions, MapView } from kit.MapKit; Entry Component struct MapPage { private mapOptions: MapOptions { center: { // 初始中心点 lat: 39.908, lng: 116.397, }, zoom: 15, // 缩放级别 tilt: 0, // 倾斜角度 }; build() { Column() { // 地图组件 MapComponent({ mapOptions: this.mapOptions, onMapReady: (map: MapView) { console.log(地图加载完成); }, }) .width(100%) .height(100%); } } }3.2 添加标记onMapReady(map: MapView): void { // 添加标记 map.addMarker({ position: { lat: 39.908, lng: 116.397 }, title: 当前位置, snippet: 徒步起点, icon: marker_icon, // 自定义图标 draggable: false, }); // 批量添加标记 map.addMarkers([ { position: { lat: 39.910, lng: 116.400 }, title: 观景台, }, { position: { lat: 39.915, lng: 116.405 }, title: 山顶, }, ]); }四、路线绘制4.1 绘制轨迹线function drawPolyline(map: MapView, points: Coordinate[]): void { // 将坐标点转换为地图坐标 const path points.map(p ({ lat: p.latitude, lng: p.longitude, })); // 绘制折线 map.addPolyline({ path: path, strokeWidth: 6, strokeColor: #4CAF50, strokeAlpha: 0.8, lineCap: round, lineJoin: round, }); }4.2 显示海拔范围function showElevationRange(map: MapView, points: Coordinate[]): void { const altitudes points.map(p p.altitude); const minAlt Math.min(...altitudes); const maxAlt Math.max(...altitudes); map.addInfoWindow({ position: { lat: points[0].latitude, lng: points[0].longitude, }, title: 海拔范围: ${minAlt}m - ${maxAlt}m, }); }五、当前位置定位import { geoLocationManager } from kit.LocationKit; async function getCurrentLocation(): Promise{ lat: number; lng: number; } { try { // 请求定位 const location await geoLocationManager.getCurrentLocation({ priority: 0x201, // 高精度定位 timeoutMs: 10000, // 超时 }); return { lat: location.latitude, lng: location.longitude, }; } catch (err) { console.error(定位失败:, err); throw err; } } // 在地图上显示当前位置 async function showMyLocation(map: MapView): Promisevoid { try { const pos await getCurrentLocation(); // 移动地图中心到当前位置 map.moveCamera({ target: { lat: pos.lat, lng: pos.lng }, zoom: 16, duration: 500, }); // 添加当前位置标记 map.addMarker({ position: { lat: pos.lat, lng: pos.lng }, title: 我的位置, icon: current_location_icon, }); } catch (err) { console.error(显示位置失败:, err); } }六、实战徒步迹首页地图Component struct HomeMapView { private mapView!: MapView; build() { Column() { MapComponent({ mapOptions: { center: { lat: 39.908, lng: 116.397 }, zoom: 14, mapType: MapType.NORMAL, // 普通地图 }, onMapReady: (map: MapView) { this.mapView map; this.initMap(); }, }) .width(100%) .height(200) .borderRadius(16); } .padding(16); } initMap(): void { // 添加附近路线标记 this.addNearbyRoutes(); } addNearbyRoutes(): void { const routes [ { lat: 39.910, lng: 116.400, name: 香山环线 }, { lat: 39.920, lng: 116.390, name: 植物园路线 }, ]; for (let route of routes) { this.mapView.addMarker({ position: { lat: route.lat, lng: route.lng }, title: route.name, }); } } }七、总结MapKit 组件让在鸿蒙 App 中集成地图变得简单。从基础地图显示、标记添加到路线绘制和定位这些能力构成了徒步迹轨迹记录和路线展示的基础。下一篇文章将继续优化地图体验实现自定义标记和气泡弹窗。下一篇预告鸿蒙原生开发手记徒步迹 - 自定义地图标记与气泡弹窗
鸿蒙原生开发手记徒步迹 - MapKit 地图组件集成集成鸿蒙地图服务实现路线展示和位置定位一、前言地图是徒步 App 的核心功能。鸿蒙提供了 MapKit 地图组件支持地图展示、标记、路线绘制、定位等功能。二、准备工作2.1 申请 API Key在华为开发者联盟 - App Services - 地图服务 中申请 API Key。2.2 配置权限// module.json5 { requestPermissions: [ { name: ohos.permission.LOCATION, reason: 用于记录徒步轨迹和显示当前位置 }, { name: ohos.permission.APPROXIMATELY_LOCATION, reason: 用于记录徒步轨迹和显示当前位置 }, { name: ohos.permission.INTERNET, reason: 加载地图数据 } ] }2.3 配置 API Key// build-profile.json5 { app: { hms: { apiKey: your_api_key_here } } }三、基础地图组件3.1 显示地图import { MapComponent, MapOptions, MapView } from kit.MapKit; Entry Component struct MapPage { private mapOptions: MapOptions { center: { // 初始中心点 lat: 39.908, lng: 116.397, }, zoom: 15, // 缩放级别 tilt: 0, // 倾斜角度 }; build() { Column() { // 地图组件 MapComponent({ mapOptions: this.mapOptions, onMapReady: (map: MapView) { console.log(地图加载完成); }, }) .width(100%) .height(100%); } } }3.2 添加标记onMapReady(map: MapView): void { // 添加标记 map.addMarker({ position: { lat: 39.908, lng: 116.397 }, title: 当前位置, snippet: 徒步起点, icon: marker_icon, // 自定义图标 draggable: false, }); // 批量添加标记 map.addMarkers([ { position: { lat: 39.910, lng: 116.400 }, title: 观景台, }, { position: { lat: 39.915, lng: 116.405 }, title: 山顶, }, ]); }四、路线绘制4.1 绘制轨迹线function drawPolyline(map: MapView, points: Coordinate[]): void { // 将坐标点转换为地图坐标 const path points.map(p ({ lat: p.latitude, lng: p.longitude, })); // 绘制折线 map.addPolyline({ path: path, strokeWidth: 6, strokeColor: #4CAF50, strokeAlpha: 0.8, lineCap: round, lineJoin: round, }); }4.2 显示海拔范围function showElevationRange(map: MapView, points: Coordinate[]): void { const altitudes points.map(p p.altitude); const minAlt Math.min(...altitudes); const maxAlt Math.max(...altitudes); map.addInfoWindow({ position: { lat: points[0].latitude, lng: points[0].longitude, }, title: 海拔范围: ${minAlt}m - ${maxAlt}m, }); }五、当前位置定位import { geoLocationManager } from kit.LocationKit; async function getCurrentLocation(): Promise{ lat: number; lng: number; } { try { // 请求定位 const location await geoLocationManager.getCurrentLocation({ priority: 0x201, // 高精度定位 timeoutMs: 10000, // 超时 }); return { lat: location.latitude, lng: location.longitude, }; } catch (err) { console.error(定位失败:, err); throw err; } } // 在地图上显示当前位置 async function showMyLocation(map: MapView): Promisevoid { try { const pos await getCurrentLocation(); // 移动地图中心到当前位置 map.moveCamera({ target: { lat: pos.lat, lng: pos.lng }, zoom: 16, duration: 500, }); // 添加当前位置标记 map.addMarker({ position: { lat: pos.lat, lng: pos.lng }, title: 我的位置, icon: current_location_icon, }); } catch (err) { console.error(显示位置失败:, err); } }六、实战徒步迹首页地图Component struct HomeMapView { private mapView!: MapView; build() { Column() { MapComponent({ mapOptions: { center: { lat: 39.908, lng: 116.397 }, zoom: 14, mapType: MapType.NORMAL, // 普通地图 }, onMapReady: (map: MapView) { this.mapView map; this.initMap(); }, }) .width(100%) .height(200) .borderRadius(16); } .padding(16); } initMap(): void { // 添加附近路线标记 this.addNearbyRoutes(); } addNearbyRoutes(): void { const routes [ { lat: 39.910, lng: 116.400, name: 香山环线 }, { lat: 39.920, lng: 116.390, name: 植物园路线 }, ]; for (let route of routes) { this.mapView.addMarker({ position: { lat: route.lat, lng: route.lng }, title: route.name, }); } } }七、总结MapKit 组件让在鸿蒙 App 中集成地图变得简单。从基础地图显示、标记添加到路线绘制和定位这些能力构成了徒步迹轨迹记录和路线展示的基础。下一篇文章将继续优化地图体验实现自定义标记和气泡弹窗。下一篇预告鸿蒙原生开发手记徒步迹 - 自定义地图标记与气泡弹窗
![[Bug已解决] ncclUnhandledCudaError: Call to CUDA function failed 通用排查手册（含健康自检脚本）解决方案](http://pic.xiahunao.cn/yaotu/[Bug已解决] ncclUnhandledCudaError: Call to CUDA function failed 通用排查手册（含健康自检脚本）解决方案)
![[Bug已解决] torch.compile(inductor) 静默丢弃前向模式 AD 切向量（返回 None）解决方案](http://pic.xiahunao.cn/yaotu/[Bug已解决] torch.compile(inductor) 静默丢弃前向模式 AD 切向量（返回 None）解决方案)
