鸿蒙OSUniApp 实现的地图定位与导航功能#三方框架 #Uniapp

UniApp 实现的地图定位与导航功能

随着移动互联网的发展，地图定位与导航功能已成为众多应用的标配。本文将详细介绍如何在 UniApp 框架下实现地图定位与导航功能，并探讨如何适配鸿蒙系统，助力开发者打造更加流畅的地图体验。

前言

最近在做一个外勤签到应用，需要实现地图定位、标记和导航功能。由于产品需要覆盖安卓、iOS、鸿蒙等多个平台，我们选择了UniApp作为开发框架。其中对鸿蒙系统的适配是一个新挑战，经过一番摸索，总结出了一套可行的实现方案，今天就把这个过程分享给大家。

技术选型

在实现地图功能前，需要先明确技术选型：

1. 地图服务商：高德地图、百度地图、腾讯地图
2. UniApp地图组件：map组件 + plus.maps模块
3. 鸿蒙系统适配：HarmonyOS地图服务

经过评估，我选择了高德地图作为底层服务，主要考虑因素有：

• 高德地图在国内覆盖面广，数据相对精准
• 接口丰富，满足定位、标记、路线规划等需求
• 与鸿蒙系统兼容性较好，HMS Core中的地图服务与高德地图接口相似
• uniapp对高德地图支持较好

环境准备

在正式开发前，我们需要完成以下准备工作：

1. 创建UniApp项目
2. 申请高德地图开发者账号并创建应用，获取Key
3. 配置SDK权限

高德地图Key申请

1. 注册高德开发者账号：https://lbs.amap.com/
2. 创建应用，分别为Android和iOS平台申请Key
3. 鸿蒙系统可以使用Android的Key，或者单独申请HMS Core地图服务的Key

项目配置

在manifest.json中配置相关权限和Key：

{"app-plus": {"modules": {"Maps": {}},"distribute": {"android": {"permissions": ["<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>","<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>","<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>","<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>","<uses-permission android:name=\"android.permission.INTERNET\"/>","<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>","<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>"],"abiFilters": ["armeabi-v7a", "arm64-v8a"]},"ios": {"UIBackgroundModes": ["location"],"urlSchemePrefix": "amap","maps": {"amap": {"appkey": "你的iOS平台高德Key"}}},"sdkConfigs": {"maps": {"amap": {"appkey_android": "你的安卓平台高德Key","appkey_ios": "你的iOS平台高德Key"}}}}}
}

对于鸿蒙系统，还需要额外添加HMS Core相关配置：

{"app-plus": {"distribute": {"android": {"pushconfig": {"hms": {"appid": "你的HMS Core AppID","appkey": "你的HMS Core AppKey","clientid": "你的HMS Core ClientID","clientsecret": "你的HMS Core ClientSecret"}}}}}
}

基础地图功能实现

首先，我们来实现基础的地图展示和定位功能。创建一个map.vue文件：

<template><view class="map-container"><mapid="myMap"ref="myMap"class="map":latitude="latitude":longitude="longitude":markers="markers":polyline="polyline":show-location="true":enable-3D="true":enable-traffic="enableTraffic":enable-rotate="true":enable-poi="true":scale="16"@tap="onMapTap"@markertap="onMarkerTap"></map><view class="controls"><view class="control-item" @tap="getCurrentLocation"><text class="iconfont icon-location"></text></view><view class="control-item" @tap="toggleTraffic"><text class="iconfont" :class="enableTraffic ? 'icon-traffic-on' : 'icon-traffic-off'"></text></view></view></view>
</template><script>
export default {data() {return {// 地图中心点latitude: 39.908823,longitude: 116.397470,// 标记点markers: [],// 路线polyline: [],// 是否显示路况enableTraffic: false,// 当前系统systemInfo: {},// 是否为鸿蒙系统isHarmonyOS: false};},onLoad() {// 获取系统信息this.getSystemInfo();// 初始化地图this.initMap();},methods: {// 获取系统信息getSystemInfo() {uni.getSystemInfo({success: (res) => {this.systemInfo = res;// 检测是否为鸿蒙系统this.isHarmonyOS = this.checkHarmonyOS(res);console.log('当前系统:', this.isHarmonyOS ? 'HarmonyOS' : res.platform);}});},// 检测是否为鸿蒙系统checkHarmonyOS(info) {// 鸿蒙系统检测，目前可通过brand和model判断const brand = (info.brand || '').toLowerCase();const model = (info.model || '').toLowerCase();const system = (info.system || '').toLowerCase();// 华为设备且系统为鸿蒙return (brand.indexOf('huawei') !== -1 || brand.indexOf('honor') !== -1) && (system.indexOf('harmony') !== -1 || system.indexOf('harmonyos') !== -1);},// 初始化地图async initMap() {// 请求定位权限await this.requestLocationPermission();// 获取当前位置this.getCurrentLocation();},// 请求定位权限requestLocationPermission() {return new Promise((resolve, reject) => {uni.authorize({scope: 'scope.userLocation',success: () => {console.log('定位权限请求成功');resolve();},fail: (err) => {console.error('定位权限请求失败', err);uni.showModal({title: '提示',content: '需要获取您的位置信息，请允许',success: (res) => {if (res.confirm) {uni.openSetting();}}});reject(err);}});});},// 获取当前位置getCurrentLocation() {uni.showLoading({ title: '定位中...' });uni.getLocation({type: 'gcj02',accuracy: 'high',success: (res) => {console.log('当前位置:', res);this.latitude = res.latitude;this.longitude = res.longitude;// 添加当前位置标记this.addMarker({id: 0,latitude: res.latitude,longitude: res.longitude,title: '当前位置',iconPath: '/static/images/location.png',width: 40,height: 40});uni.hideLoading();},fail: (err) => {console.error('获取位置失败', err);uni.hideLoading();uni.showToast({title: '定位失败，请检查定位权限',icon: 'none'});}});},// 添加标记点addMarker(marker) {const index = this.markers.findIndex(item => item.id === marker.id);if (index !== -1) {this.markers.splice(index, 1, marker);} else {this.markers.push(marker);}},// 地图点击事件onMapTap(e) {console.log('点击地图位置:', e);// 添加标记点this.addMarker({id: this.markers.length + 1,latitude: e.detail.latitude,longitude: e.detail.longitude,title: `标记 ${this.markers.length + 1}`,iconPath: '/static/images/marker.png',width: 30,height: 30});},// 标记点点击事件onMarkerTap(e) {const markerId = e.detail.markerId;const marker = this.markers.find(item => item.id === markerId);if (!marker) return;uni.showActionSheet({itemList: ['查看详情', '导航到这里'],success: (res) => {if (res.tapIndex === 0) {// 查看详情uni.showModal({title: marker.title,content: `位置：${marker.latitude}, ${marker.longitude}`,showCancel: false});} else if (res.tapIndex === 1) {// 导航this.openMapNavigation(marker);}}});},// 切换路况toggleTraffic() {this.enableTraffic = !this.enableTraffic;}}
};
</script><style lang="scss">
.map-container {position: relative;width: 100%;height: 100vh;.map {width: 100%;height: 100%;}.controls {position: absolute;right: 20rpx;bottom: 100rpx;display: flex;flex-direction: column;.control-item {width: 80rpx;height: 80rpx;background-color: #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-bottom: 20rpx;box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);.iconfont {font-size: 40rpx;color: #3a86ff;}}}
}
</style>

导航功能实现

现在我们来实现导航功能，在 UniApp 中可以通过调用系统地图APP或者使用高德/百度地图SDK实现导航。下面我们添加导航相关方法：

// 添加到methods中
// 打开地图导航
openMapNavigation(destination) {// 目标位置const destinationLatitude = destination.latitude;const destinationLongitude = destination.longitude;const destinationName = destination.title || '目的地';// 鸿蒙系统处理if (this.isHarmonyOS) {this.openHarmonyMapNavigation(destinationLatitude, destinationLongitude, destinationName);return;}// 不同平台的处理方式// #ifdef APP-PLUSthis.openNativeMapApp(destinationLatitude, destinationLongitude, destinationName);// #endif// #ifdef H5this.openWebMapNavigation(destinationLatitude, destinationLongitude, destinationName);// #endif// #ifdef MP// 小程序平台使用map组件的openMapApp方法uni.openLocation({latitude: destinationLatitude,longitude: destinationLongitude,name: destinationName,scale: 18});// #endif
},// 打开原生地图应用(App端)
openNativeMapApp(latitude, longitude, name) {// 检测手机上已安装的地图应用plus.maps.getInstalledMaps((maps) => {console.log('安装的地图应用:', maps);if (maps.length === 0) {uni.showToast({title: '本机未安装地图应用',icon: 'none'});return;}// 优先使用高德地图const amap = maps.find(map => map.id === 'amap');if (amap) {plus.maps.openMap({latitude: latitude,longitude: longitude,name: name,scale: 16,mapType: plus.maps.MapType.NAVIGATION,dst: {latitude: latitude, longitude: longitude,name: name},coordType: 'gcj02',provider: 'amap'});} else {// 使用第一个可用的地图应用plus.maps.openMap({latitude: latitude,longitude: longitude,name: name,scale: 16,dst: {latitude: latitude, longitude: longitude,name: name}});}});
},// 打开Web地图导航(H5端)
openWebMapNavigation(latitude, longitude, name) {// 检测设备类型const isIOS = /iphone|ipad|ipod/i.test(navigator.userAgent);// 高德地图URLconst amapUrl = `https://uri.amap.com/navigation?to=${longitude},${latitude},${encodeURIComponent(name)}&mode=car&callnative=1`;// 百度地图URLconst bdMapUrl = `https://api.map.baidu.com/direction?destination=latlng:${latitude},${longitude}|name:${encodeURIComponent(name)}&mode=driving&origin=我的位置&coord_type=gcj02&output=html&src=webapp.baidu.openAPIdemo`;// 优先使用高德地图window.location.href = amapUrl;// 如果5秒后还在当前页面，说明没有安装高德地图APP，尝试使用百度地图setTimeout(() => {if (document.hidden || document.webkitHidden) return;window.location.href = bdMapUrl;}, 5000);
},// 鸿蒙系统地图导航处理
openHarmonyMapNavigation(latitude, longitude, name) {// #ifdef APP-PLUS// 尝试使用HMS Core地图服务// 注意：需要先集成HMS Core SDKif (plus.hms && plus.hms.map) {plus.hms.map.openMap({latitude: latitude,longitude: longitude,name: name,navigationMode: 'driving' // driving, riding, walking});return;}// 降级处理：如果HMS Core不可用，尝试使用高德地图this.openNativeMapApp(latitude, longitude, name);// #endif
}

路线规划功能

接下来，我们增加路线规划功能，实现从当前位置到目标位置的路线绘制：

// 添加到methods中
// 规划路线
planRoute(startPoint, endPoint) {uni.showLoading({ title: '规划路线中...' });// 鸿蒙系统处理if (this.isHarmonyOS) {this.planRouteForHarmonyOS(startPoint, endPoint);return;}// 调用高德地图API规划路线uni.request({url: 'https://restapi.amap.com/v3/direction/driving',data: {key: this.amapKey, // 高德地图Web服务API的Keyorigin: `${startPoint.longitude},${startPoint.latitude}`,destination: `${endPoint.longitude},${endPoint.latitude}`,extensions: 'all'},success: (res) => {uni.hideLoading();if (res.data && res.data.status === '1' && res.data.route && res.data.route.paths && res.data.route.paths.length > 0) {const path = res.data.route.paths[0];const steps = path.steps;// 解析路线坐标点let points = [];steps.forEach(step => {const stepPoints = step.polyline.split(';');stepPoints.forEach(point => {const [lng, lat] = point.split(',');points.push({longitude: parseFloat(lng),latitude: parseFloat(lat)});});});// 绘制路线this.drawRoute(points, path.distance);} else {uni.showToast({title: '路线规划失败',icon: 'none'});}},fail: (err) => {console.error('请求路线规划API失败', err);uni.hideLoading();uni.showToast({title: '路线规划失败',icon: 'none'});}});
},// 绘制路线
drawRoute(points, distance) {// 清除现有路线this.polyline = [];// 添加新路线this.polyline.push({points: points,color: '#3a86ff',width: 6,arrowLine: true,dottedLine: false});// 设置地图可视区域，以包含路线起点和终点// 获取 map 组件的实例const mapContext = uni.createMapContext('myMap', this);// 设置地图视野范围mapContext.includePoints({points: [points[0], points[points.length - 1]],padding: [80, 80, 80, 80]});// 显示路线信息uni.showModal({title: '路线信息',content: `总距离: ${(distance / 1000).toFixed(2)} 公里`,showCancel: false});
},// 鸿蒙系统路线规划
planRouteForHarmonyOS(startPoint, endPoint) {// #ifdef APP-PLUS// 如果HMS Core可用，使用HMS Core地图服务规划路线if (plus.hms && plus.hms.map && plus.hms.map.routePlan) {plus.hms.map.routePlan({start: {latitude: startPoint.latitude,longitude: startPoint.longitude},end: {latitude: endPoint.latitude,longitude: endPoint.longitude},mode: 'driving', // driving, riding, walkingsuccess: (result) => {uni.hideLoading();// 解析HMS Core返回的路线数据，格式可能与高德略有不同const points = result.paths[0].points.map(point => ({longitude: point.longitude,latitude: point.latitude}));this.drawRoute(points, result.paths[0].distance);},fail: (err) => {console.error('HMS Core路线规划失败', err);uni.hideLoading();// 降级处理：使用高德地图APIthis.planRoute(startPoint, endPoint);}});return;}// HMS Core不可用，降级处理this.planRoute(startPoint, endPoint);// #endif
}

为了完整实现路线规划功能，我们还需要在界面上添加一个规划路线的按钮。在template部分添加以下内容：

<!-- 在controls里添加规划路线按钮 -->
<view class="control-item" @tap="showRoutePlanDialog"><text class="iconfont icon-route"></text>
</view><!-- 添加路线规划对话框 -->
<uni-popup ref="routePlanPopup" type="bottom"><view class="route-plan-dialog"><view class="dialog-title">路线规划</view><view class="dialog-content"><view class="input-item"><view class="label">起点</view><view class="input"><input type="text" v-model="startPoint.name" placeholder="当前位置" disabled /></view></view><view class="input-item"><view class="label">终点</view><view class="input"><input type="text" v-model="endPoint.name" placeholder="请选择终点" @tap="selectEndPoint" /></view></view></view><view class="dialog-footer"><button class="cancel-btn" @tap="closeRoutePlanDialog">取消</button><button class="confirm-btn" @tap="confirmRoutePlan" :disabled="!endPoint.name">开始规划</button></view></view>
</uni-popup>

同时，我们需要在data中添加相关数据：

data() {return {// ... 现有数据// 起点和终点startPoint: {latitude: 0,longitude: 0,name: '当前位置'},endPoint: {latitude: 0,longitude: 0,name: ''}};
},

然后添加相关方法：

// 显示路线规划对话框
showRoutePlanDialog() {// 设置起点为当前位置this.startPoint = {latitude: this.latitude,longitude: this.longitude,name: '当前位置'};// 清空终点this.endPoint = {latitude: 0,longitude: 0,name: ''};// 显示对话框this.$refs.routePlanPopup.open();
},// 关闭路线规划对话框
closeRoutePlanDialog() {this.$refs.routePlanPopup.close();
},// 选择终点
selectEndPoint() {// 提示用户点击地图选择终点uni.showToast({title: '请点击地图选择终点',icon: 'none'});// 关闭对话框this.closeRoutePlanDialog();// 设置地图状态为选择终点this.mapState = 'selectEndPoint';
},// 确认路线规划
confirmRoutePlan() {if (!this.endPoint.name) {uni.showToast({title: '请先选择终点',icon: 'none'});return;}// 关闭对话框this.closeRoutePlanDialog();// 规划路线this.planRoute(this.startPoint, this.endPoint);
}

同时，我们需要修改onMapTap方法，以支持选择终点：

// 地图点击事件
onMapTap(e) {console.log('点击地图位置:', e);const { latitude, longitude } = e.detail;// 如果当前状态是选择终点if (this.mapState === 'selectEndPoint') {// 设置终点this.endPoint = {latitude,longitude,name: '选定位置'};// 添加终点标记this.addMarker({id: 'endPoint',latitude,longitude,title: '终点',iconPath: '/static/images/end.png',width: 30,height: 30});// 重置地图状态this.mapState = '';// 显示路线规划对话框this.showRoutePlanDialog();return;}// 正常添加标记点this.addMarker({id: this.markers.length + 1,latitude,longitude,title: `标记 ${this.markers.length + 1}`,iconPath: '/static/images/marker.png',width: 30,height: 30});
}

鸿蒙系统适配

鸿蒙系统（HarmonyOS）作为国产操作系统，已在越来越多的华为设备上使用。虽然目前鸿蒙系统对安卓应用有较好的兼容性，但仍有一些特殊之处需要注意。

1. 系统检测

鸿蒙系统检测是适配的第一步，我们已在代码中实现：

// 检测是否为鸿蒙系统
checkHarmonyOS(info) {// 鸿蒙系统检测，目前可通过brand和model判断const brand = (info.brand || '').toLowerCase();const model = (info.model || '').toLowerCase();const system = (info.system || '').toLowerCase();// 华为设备且系统为鸿蒙return (brand.indexOf('huawei') !== -1 || brand.indexOf('honor') !== -1) && (system.indexOf('harmony') !== -1 || system.indexOf('harmonyos') !== -1);
}

2. HMS Core集成

鸿蒙系统使用HMS Core（Huawei Mobile Services）替代GMS（Google Mobile Services），因此需要集成HMS Core SDK。以下是基本步骤：

1. 注册华为开发者账号，创建应用并获取AppID等信息
2. 下载并集成HMS Core SDK
3. 在manifest.json中配置相关信息

3. 地图服务适配

鸿蒙系统提供了内置的地图服务，但也可以使用高德地图等第三方服务。对于完全的鸿蒙适配，建议两种方式都支持：

// 鸿蒙系统地图导航处理
openHarmonyMapNavigation(latitude, longitude, name) {// #ifdef APP-PLUS// 尝试使用HMS Core地图服务if (plus.hms && plus.hms.map) {plus.hms.map.openMap({latitude: latitude,longitude: longitude,name: name,navigationMode: 'driving'});return;}// 降级处理：如果HMS Core不可用，尝试使用高德地图this.openNativeMapApp(latitude, longitude, name);// #endif
}

4. 权限处理

鸿蒙系统的权限管理与安卓类似，但可能会有一些差异。对于地图定位功能，需要特别注意位置权限的申请：

// 请求定位权限
requestLocationPermission() {return new Promise((resolve, reject) => {uni.authorize({scope: 'scope.userLocation',success: () => {console.log('定位权限请求成功');resolve();},fail: (err) => {console.error('定位权限请求失败', err);// 对于鸿蒙系统，可能需要特殊处理if (this.isHarmonyOS) {uni.showModal({title: '定位权限申请',content: '地图功能需要获取您的位置信息，请在弹出的对话框中点击"允许"',success: (res) => {if (res.confirm) {// 鸿蒙系统的设置页面可能与安卓有所不同if (plus.os.name.toLowerCase() === 'android') {plus.runtime.openURL('hap://app/com.huawei.systemmanager/settingApp');} else {uni.openSetting();}}}});} else {uni.showModal({title: '提示',content: '需要获取您的位置信息，请允许',success: (res) => {if (res.confirm) {uni.openSetting();}}});}reject(err);}});});
}

常见问题与解决方案

在实际开发过程中，可能会遇到以下问题：

1. 定位不准确

问题描述：有时地图定位不准确，或者无法获取位置。

解决方案：

• 确保申请了高精度定位权限
• 使用gcj02坐标系统（高德地图使用的坐标系）
• 使用多种定位方式（GPS、网络、基站）结合
• 在鸿蒙系统上，确保已正确配置HMS Core定位服务

// 获取高精度位置
uni.getLocation({type: 'gcj02',altitude: true, // 获取海拔信息accuracy: 'high', // 高精度定位geocode: true, // 获取地址信息success: (res) => {console.log('高精度定位结果:', res);// 处理位置信息},fail: (err) => {// 降级处理：尝试使用低精度定位uni.getLocation({type: 'gcj02',success: (lowRes) => {console.log('低精度定位结果:', lowRes);// 处理位置信息},fail: (lowErr) => {console.error('定位失败', lowErr);}});}
});

2. 鸿蒙系统下地图显示异常

问题描述：在某些鸿蒙系统设备上，地图显示异常或功能不完整。

解决方案：

• 确认已在manifest.json中配置了正确的HMS Core服务
• 对地图组件应用特定的样式修复
• 使用原生插件进行深度兼容

/* 鸿蒙系统地图样式修复 */
.harmony-map-fix {/* 可能需要特定设备的样式修复 */transform: translateZ(0);-webkit-transform: translateZ(0);
}

3. 导航无法打开地图应用

问题描述：点击导航按钮无法打开地图应用。

解决方案：

• 检查URL Scheme配置是否正确
• 提供多个地图应用的支持（高德、百度、腾讯等）
• 针对鸿蒙系统，优先使用HMS Core的地图服务

// 多地图应用支持
openMapNavigation(destination) {const { latitude, longitude, name } = destination;// 检测平台if (this.isHarmonyOS) {// 鸿蒙系统处理this.openHarmonyMapNavigation(latitude, longitude, name);return;}// 获取已安装的地图应用plus.maps.getInstalledMaps((maps) => {if (maps.length === 0) {// 没有安装地图应用，提供网页版导航window.location.href = `https://uri.amap.com/navigation?to=${longitude},${latitude},${encodeURIComponent(name)}&mode=car`;return;}// 展示可用的地图应用列表const mapList = maps.map(map => map.name);uni.showActionSheet({itemList: mapList,success: (res) => {const selectedMap = maps[res.tapIndex];// 打开选择的地图应用plus.maps.openMap({latitude: latitude,longitude: longitude,name: name,scale: 16,provider: selectedMap.id});}});});
}

总结

通过本文，我们详细介绍了如何在UniApp框架下实现地图定位与导航功能，并针对鸿蒙系统进行了适配。主要内容包括：

1. 基础地图组件：使用UniApp的map组件实现地图展示与交互
2. 定位功能：获取用户当前位置并显示在地图上
3. 标记功能：在地图上添加与管理标记点
4. 导航功能：调用系统地图应用进行导航
5. 路线规划：使用API规划路线并在地图上绘制
6. 鸿蒙适配：针对鸿蒙系统的特殊处理

在实际开发中，还可以根据具体需求进一步扩展功能，例如：

• 添加地点搜索功能
• 实现自定义地图样式
• 增加位置共享功能
• 支持离线地图

希望本文对你在UniApp项目中实现地图功能有所帮助，特别是在需要兼容鸿蒙系统的场景下。