Huawei HMS maps not working on Ionic Capacitor runtime-CodePudding

I have followed this guide to add Huawei HMS maps to my IONIC capacitor runtime app. https://github.com/HMS-Core/hms-cordova-plugin/tree/master/cordova-plugin-hms-map/example/ionic

This app has google-services.json and huawei agconnect-services.json.

In project build.gradle I'm using

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

capacitor.build.gradle

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

Here are the npm libs

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

Set the appropriate sha2 figerprint in the Huawei developer console. App 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)));
        }

Testing on a Huawei Harmony OS phone, but geting this error.

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)

Fo far I have not found any solution or details about such error on internet. Any help is appreciated.

Update 1 Looks like the map is properly constructed:

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

But the target map div stays in blank and when I tap on it I'm able to see the clicks being logged.

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;
        });
}

Update 2 The issue is with the transparency of the parent div of the map div. The plugin does not set the background transparent to all its parent nodes automatically on map init.

CodePudding user response：

The provided log is not enough. It is better to create ticket here: https://developer.huawei.com/consumer/en/support/feedback/#/ And put all the log file in the ticket.

Or you can search "HmsMap" and share the search result here.

CodePudding user response：

The issue was solved by setting all map div's parent ion-content nodes'css value when map has to be shown and remove it when map page is destroyed.

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);
}