HarmonyOS 鸿蒙Next MapKit地图不显示
HarmonyOS 鸿蒙Next MapKit地图不显示
根据开发指导
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/application-dev-overview-V5#section1726913517284 在AppGallery Connect中添加了公钥指纹，但是还是不显示，这是为啥啊？
2 回复
按以下步骤检查下地图服务，特别是签名证书指纹那部分。
1.一般没有展示地图，可能和没有配置SHA256指纹证书配置，网络，定位权限，没有打开地图服务等有关系，如果刚配置完权限等，需要24h生效，（可以将手机系统时间往后设置24h）。
2.module.json5文件中 metadata节点下 clientid 写正确—需要在里面直接写client_id的信息，不能通过$符引用资源文件中的值，当前无法解析这种引用方式；
3、需要检查一下当前的签名证书指纹是否也是自动签名的，需要改成手动签名且需要和AGC上配置的证书指纹一致 签名证书使用 这个选项中的 配置方式 “选择SHA256公钥指纹‘’
地图需要手动签名且需要和AGC上配置的证书指纹一致
再检查一下module.json里面有没有做以下配置：
"metadata": [
// 配置如下信息
{
"name": "client_id",
"value": "110799233"
},
],
"requestPermissions":[
{
"name" : "ohos.permission.INTERNET",
},
{
"name": "ohos.permission.LOCATION",
"reason": "$string:EntryAbility_desc",
"usedScene": {
"abilities": [
"EntryAbility"
],
"when": "always"
}
},
{
"name": "ohos.permission.APPROXIMATELY_LOCATION",
"reason": "$string:EntryAbility_desc",
"usedScene": {
"abilities": [
"EntryAbility"
],
"when": "always"
}
}
],应该是自动签名的，导致不一样，你用手动签名改一致试一下呢
Client ID详细可参考如下文档，一个是项目的Client ID,一个是项目下应用的Client ID
在配置地图时间，module.json5中配置的是应用的Client ID
问题一、参考以下demo：
import { map, mapCommon, MapComponent } from '@kit.MapKit';
import { AsyncCallback, BusinessError } from '@kit.BasicServicesKit';
import { abilityAccessCtrl, bundleManager, common, PermissionRequestResult, Permissions } from '@kit.AbilityKit';
import { geoLocationManager } from '@kit.LocationKit';
[@Entry](/user/Entry)
[@Component](/user/Component)
struct HuaweiMyLocationDemo {
//校验应用是否被授权定位权限，可以通过调用checkAccessToken()方法来校验当前是否已经授权。
async checkPermission(): Promise<void> {
let applyResult: boolean = false;
const permissions: Array<Permissions> = ['ohos.permission.LOCATION','ohos.permission.APPROXIMATELY_LOCATION','ohos.permission.INTERNET'];
for(let permission of permissions) {
let grantStatus: abilityAccessCtrl.GrantStatus = await this.checkAccessToken(permission);
if(grantStatus == abilityAccessCtrl.GrantStatus.PERMISSION_GRANTED) {
applyResult = true;
}else {
applyResult = false
}
}
if(!applyResult) {
this.requestPermissions();
}else {
//启用我的位置图层，mapController为地图操作类对象，获取方式详见地图呈现章节
this.mapController?.setMyLocationEnabled(true);
//启用我的位置按钮
this.mapController?.setMyLocationControlsEnabled(true);
}
}
//如果没有被授予定位权限，动态向用户申请授权
requestPermissions(): void {
let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
atManager.requestPermissionsFromUser(getContext() as common.UIAbilityContext,['ohos.permission.LOCATION', 'ohos.permission.APPROXIMATELY_LOCATION','ohos.permission.INTERNET'])
.then((data: PermissionRequestResult) => {
//启用我的位置图层
this.mapController?.setMyLocationEnabled(true);
//启用我的位置按钮
this.mapController?.setMyLocationControlsEnabled(true);
})
.catch((err: BusinessError) => {
console.error(`Failed to request permissions from user. Code is ${err.code}, message is ${err.message}`)
})
}async checkAccessToken(permission: Permissions): Promise<abilityAccessCtrl.GrantStatus> {
let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
let grantStatus: abilityAccessCtrl.GrantStatus = abilityAccessCtrl.GrantStatus.PERMISSION_DENIED;
//获取应用程序的accessTokenID
let tokenId: number = 0;
try {
let bundleInfo: bundleManager.BundleInfo = await bundleManager.getBundleInfoForSelf(bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION);
let appInfo: bundleManager.ApplicationInfo = bundleInfo.appInfo;
tokenId = appInfo.accessTokenId;
} catch ( error ) {
let err: BusinessError = error as BusinessError;
console.error(`Failed to get bundle info for self. Code is ${err.code},message is ${err.message}`)
}
//校验应用是否被授予权限
try{
grantStatus = await atManager.checkAccessToken(tokenId,permission);
} catch (error) {
let err: BusinessError = error as BusinessError;
console.error(`Failed to check access token. Code is ${err.code}, message is ${err.message}`)
}
return grantStatus;
}
//定义参数mapOption,设置地图中心点坐标以及层级。
private mapOption?: mapCommon.MapOptions;
//定义参数callback,通过callback回调的方式获取MapComponentController对象，用来操作地图。
private callback?: AsyncCallback<map.MapComponentController>
//定义TAG
private TAG = 'HuaweiMyLocationDemo';
//地定义地图参数mapController，获取地图的控制器类，用来操作地图
private mapController?: map.MapComponentController;
aboutToAppear(): void {
this.checkPermission();
// 地图初始化参数，设置地图中心坐标以及层级
this.mapOption = {
position: {
target: {
latitude: 39.9,
longitude:116.4
},
zoom: 10
},
myLocationControlsEnabled: true,
scaleControlsEnabled: true,
};// 地图初始化的回调
this.callback = async (err, mapController) => {
if(!err) {
//获取地图的控制器类，用来操作地图
this.mapController = mapController;
// 启用我的位置图层
this.mapController?.setMyLocationEnabled(true);
//启用我的位置按钮。
this.mapController?.setMyLocationControlsEnabled(true);
this.mapController.setZoomControlsEnabled(true);
// 指南针开关
this.mapController.setCompassControlsEnabled(true);
//滚动相机，将相机按照指定的像素点移动
let x = 100.0;
let y = 100.0;
let cameraUpdate = map.scrollBy(x, y);
// 以动画方式移动地图相机
this.mapController.animateCamera(cameraUpdate, 1000);
// 设置最小偏好缩放级别，范围为[2,20]
this.mapController.setMinZoom(6);
// 设置最大偏好缩放级别，范围为[2,20]
this.mapController.setMaxZoom(14);
let style: mapCommon.MyLocationStyle = {
anchorU: 0.5,
anchorV: 0.5,
radiusFillColor: 0xffff0000,
// icon为自定义图标资源，使用时需要替换
// 图标存放在resources/rawfile，icon参数传入rawfile文件夹下的相对路径
icon: 'icon.png',
};
await this.mapController.setMyLocationStyle(style);
//初始化我的位置
this.getMyLocation()
}
}
}
build() {
Stack() {
MapComponent({mapOptions: this.mapOption, mapCallback: this.callback}).width('100%').height('100%');
}.height('100%')
}
// 获取当前位置并视图移动过去
getMyLocation() {
geoLocationManager.getCurrentLocation().then(async (result) => {
console.log('MapSignIn', 'getMyLocation = ' + JSON.stringify(result))
let position: geoLocationManager.Location = {
"latitude": result.latitude,
"longitude": result.longitude,
"altitude": 0,
"accuracy": 0,
"speed": 0,
"timeStamp": 0,
"direction": 0,
"timeSinceBoot": 0
};
this.mapController?.setMyLocation(position)//创建CameraUpdate对象
let gcj02Position: mapCommon.LatLng = await this.convertCoordinate(result.latitude,result.longitude)
let latLng: mapCommon.LatLng = {
latitude: gcj02Position.latitude,
longitude:gcj02Position.longitude
}
let zoom = 14;
let cameraUpdate = map.newLatLng(latLng,zoom)
// 以动画方式移动地图相机
this.mapController?.animateCamera(cameraUpdate,1000);
})
}
async convertCoordinate(latitude: number, longitude: number): Promise<mapCommon.LatLng> {
let wgs84Position: mapCommon.LatLng = {
latitude: latitude,
longitude: longitude
}
let gcj02Postion: mapCommon.LatLng = await map.convertCoordinate(mapCommon.CoordinateType.WGS84, mapCommon.CoordinateType.GCJ02,wgs84Position);
return gcj02Postion;
}
}问题二、暂时无可用的demo，有可以参考实现的demo：https://gitee.com/harmonyos_samples/map-kit_-sample-code_-demo-arkts
针对HarmonyOS 鸿蒙Next MapKit地图不显示的问题，以下是一些可能的解决方案：
- 检查AGC配置：确保在AppGallery Connect（AGC）中已经开启了地图服务开关，并正确配置了ClientID、签名和地图API。特别注意，签名证书指纹需配置为手动签名且选择SHA256公钥指纹，并与AGC上配置的证书指纹一致。
- 检查权限：确保应用已授予必要的权限，包括网络权限和定位权限，这些权限对于地图显示至关重要。
- 检查组件参数：确认地图组件的初始化参数是否正确，包括中心点坐标、缩放层级等。
- 检查资源路径：确保地图资源路径正确，且资源文件没有丢失或损坏。
- 使用真机调试：由于模拟器可能不支持所有华为服务API，包括地图服务，因此建议使用真机进行调试。
如果以上步骤均无法解决问题，可能是由于其他未知原因导致的。此时，建议检查官方文档以获取更多信息。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。
