华为 HMS 地图不适用于离子电容器运行时

Question

我已按照本指南将华为 HMS 地图添加到我的 IONIC 电容器运行时应用程序中。 https://github.com/HMS-Core/hms-cordova-plugin/tree/master/cordova-plugin-hms-map/example/ionic

此应用有google-services.json和huawei agconnect-services.json.

在项目build.gradle中我正在使用

[...]
classpath 'com.huawei.agconnect:agcp:1.5.2.300'

电容.build.gradle

dependencies {
    [...]
    implementation "com.huawei.hms:base:5.2.0.300"
    implementation "com.huawei.hms:maps:6.0.1.304"
}

这是 npm 库

npm install @hmscore/cordova-plugin-hms-map@latest
npm install @ionic-native/core @hmscore/ionic-native-hms-map@latest

在华为开发者控制台设置合适的sha2指纹。应用 build.gradle.

    signingConfigs {
        config {
            storeFile file('huawei.jks')
            storePassword '*****'
            keyAlias 'mapshowcase'
            keyPassword '*****'
        }
    }

dependencies {
    [...]
    implementation 'com.huawei.agconnect:agconnect-core:1.5.2.300'
}

     async initMap() {
            const mapOptions = {
                mapType: MapType.MAP_TYPE_TERRAIN,
                cameraPosition: {
                    target: {lat: 40.7587658, lng: 30.3146964},
                    zoom: 2
                }
            };
    
            this.hmsMap.requestPermission();
            this.map = await this.hmsMap.getMap('map', mapOptions, {marginTop: 50});
            this.addListener();
            this.map.setMyLocationEnabled(true);
            this.map.getUiSettings().setMyLocationButtonEnabled(true);
            this.map.getProjection().getVisibleRegion().then(vr => console.log(JSON.stringify(vr)));
            this.map.getProjection().toScreenLocation({lat: 12, lng: 43}).then(point => console.log(JSON.stringify(point)));
            this.map.getProjection().fromScreenLocation({x: 300, y: 600}).then(latLng => console.log(JSON.stringify(latLng)));
        }

在 Huawei Harmony OS phone 上进行测试，但出现此错误。

E/HmsMapKit_ErrorTraceLogPusher_4: cache error trace log : ErrorTraceLogDTO{ scenario = ACCESS_SERVICE_ERROR', message='5 : Unknown Code - 5'}
    com.huawei.hms.maps.foundation.client.mac: * * *n*n*w* *o*e*-*5
        at com.huawei.hms.maps.foundation.client.mac$maa.b(Unknown Source:25)
        at com.huawei.hms.maps.foundation.client.mab.a(Unknown Source:20)
        at com.huawei.hms.maps.foundation.client.mab.c(Unknown Source:80)
        at com.huawei.hms.maps.foundation.client.mab.a(Unknown Source:88)
        at com.huawei.hms.maps.provider.client.tile.maa.a(Unknown Source:1)
        at com.huawei.hms.maps.provider.client.tile.maa.lambda$gI3f4RyIuh0G4Qoia5V0XosFnEE(Unknown Source:0)
        at com.huawei.hms.maps.provider.client.tile.-$$Lambda$maa$gI3f4RyIuh0G4Qoia5V0XosFnEE.call(Unknown Source:6)
        at com.huawei.hms.maps.foundation.client.mab$maa.a(Unknown Source:3)
        at com.huawei.hms.maps.provider.client.tile.maa.c(Unknown Source:23)
        at com.huawei.hms.maps.provider.client.tile.maa.a(Unknown Source:4)
        at com.huawei.hms.maps.provider.cache.mag.a(Unknown Source:63)
        at com.huawei.hms.maps.provider.cache.mag$mac.startUrlRequest(Unknown Source:2)
        at com.huawei.map.MapController.startUrlRequest(Unknown Source:28)

到目前为止，我还没有在互联网上找到有关此类错误的任何解决方案或详细信息。感谢任何帮助。

更新 1 看起来地图构建正确：

I/Capacitor/Console: File: http://localhost/ - Line 6588 - Msg: Huawei map constructed with the div id map :: and the props 1

但目标地图 div 保持空白，当我点击它时，我能够看到记录的点击。

addListener() {
        const log = document.getElementById('log');
        this.map.on(MapEvent.ON_MAP_CLICK, (latLng) => {
            log.innerHTML = '<br>' + 'Map_Click:' + latLng.lat + '<-->' + latLng.lng + log.innerHTML;
        });
        this.map.on(MapEvent.ON_MAP_LONG_CLICK, (latLng) => {
            log.innerHTML = '<br>' + 'Map_Long_Click:' + latLng.lat + '<-->' + latLng.lng + log.innerHTML;
        });
}

更新 2 问题在于地图 div 的父级 div 的透明度。插件不会在地图初始化时自动设置对其所有父节点透明的背景。

Answer 1

提供的日志不够。最好在这里创建工单：https://developer.huawei.com/consumer/en/support/feedback/#/ 并将所有日志文件放入工单中。

或者您可以搜索“HmsMap”并在此分享搜索结果。

Answer 2

当必须显示地图时设置所有地图 div 的父节点 ion-content 节点的 css 值并在地图页面被销毁时将其删除，问题已解决。

global.scss

    --ion-background-color: var(--map-background, white);
    
    .background-transparent {
      --map-background: transparent !important;
    }

Map.page.ts

ionViewDidEnter(){
    document.body.classList.toggle('background-transparent', true);
}

ionViewWillLeave(){
    document.body.classList.toggle('background-transparent', false);
}

华为 HMS 地图不适用于离子电容器运行时

Huawei HMS maps not working on Ionic Capacitor runtime

maps

ionic-framework

capacitor

huawei-mobile-services