Integrating Location kit in Quick App - Huawei Developers

More information like this, you can visit HUAWEI Developer Forum​
I have written series of article on Quick App. If you are new to Quick App refer my previous articles.
Quick App set up
A Novice Journey Towards Quick App ( Part 2 )
A Novice Journey Towards Quick App ( Part 3 )
In this article we will learn how to use Location Kit in Quick App.
Introduction
Geolocation is the ability to track a device’s using GPS, cell phone towers, Wi-Fi access points or a combination of these. Huawei Location Kit combines the GPS, Wi-Fi, and base station locations to help you quickly obtain precise user locations.
Should have
1. To integrate the location kit in Quick App you should have developer account. Register here.
2. Android version 4.4 or later.
3. HMS core version 3.0.0.300 later has to be installed.
4. Enable HMS Core Location permission, Setting >Apps > HMS Core > Permission.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
5. Enable location permission for application to be tested.
6. Location service should be enabled in the notification panel.
7. Test application in good network signal to get the more accurate location information.
Steps to be followed.
1. Create project (refer Quick App Part 1).
2. Add the feature attribute in manifest.json.
Code:
{
"name": "system.geolocation"
}
3. Import the geolocation in the script
Code:
import geolocation from '@system.geolocation'
4. Design Location kit screen.
1) geolocation.getLocation(cordType, timeout, success, fail, complete)
· cordType: wgs84: This is the default value. It indicates that the geographical location will be returned by invoking the system location ability.
· Timeout: timeout duration in milliseconds. Default value is 30000. It is mandatory
· Success: It is callback function used when interface is successfully called.
· Fail: Callback function used when the interface fails to be called.
· Complete: Callback function used when the interface call is completed.
2) geolocation.subscribe(cordType, callback, fail)
· cordType: wgs84: This is the default value. It indicates that the geographical location will be returned by invoking the system location ability.
· Callback: It is called whenever location information changed.
· Fail: Callback function used when the interface fails to be called.
3) gelocation.unsubscribe() This is cancel the monitoring the geographical location.
4) geolocation.getLocationType(success, fail, complete): To get the location types currently supported by the system.
5) geolocation.openLocation: This is to view the location on the built in map. Currently it is Supported only in Chinese mainland.
6) geolocation.chooseLocation: This it open map and select location. Currently it is supported only in Chinese mainland.
Code:
<template>
<div class="container">
<div class="page-title-wrap">
<text class="page-title">{{componentName}}</text>
</div>
<div class="item-content">
<text class="txt">{{$t('Current Location')}}</text>
<text class="txt">latitude: {{geolocationGetData.latitude}}</text>
<text class="txt">longitude: {{geolocationGetData.longitude}}</text>
<text class="txt">altitude: {{geolocationGetData.altitude}}</text>
<text class="txt">accuracy: {{geolocationGetData.accuracy}}</text>
<text class="txt">heading: {{geolocationGetData.heading}}</text>
<text class="txt">speed: {{geolocationGetData.speed}}</text>
<text class="txt">time: {{geolocationGetData.time}}</text>
</div>
<input type="button" class="btn" onclick="getGeolocation" value="{{$t('Get My Current Location')}}" />
<div class="item-content">
<text class="txt">{{$t('Location')}}</text>
<text class="txt">latitude: {{geolocationListenData.latitude}}</text>
<text class="txt">longitude: {{geolocationListenData.longitude}}</text>
<text class="txt">accuracy: {{geolocationListenData.accuracy}}</text>
<text class="txt">time: {{geolocationListenData.time}}</text>
</div>
<input type="button" class="btn" onclick="listenGeolocation" value="{{$t('Monitor Location')}}" />
<input type="button" class="btn" onclick="cancelGeolocation" value="{{$t('Cancel Monitoring Location')}}" />
<div class="item-content">
<text class="txt">{{$t('Location Type: ')}}{{typeVaule}}</text>
</div>
<input type="button" class="btn" onclick="getLocationType" value="{{$t('Location type')}}" />
<input type="button" class="btn" onclick="openLocation" value="Open Location in Map" />
<input type="button" class="btn" onclick="chooseLocation" value="Choose location from Map" />
</div>
</div>
</template>
<style>
@import "../../../common/css/common.css";
.item-container {
margin-bottom: 30px;
margin-right: 60px;
margin-left: 60px;
flex-direction: column;
color: #ffffff;
}
.item-content {
flex-direction: column;
padding: 30px;
margin-bottom: 50px;
align-items: flex-start;
color: #ffffff;
}
.txt{
color: #ffffff;
}
</style>
<script>
import geolocation from '@system.geolocation'
import prompt from '@system.prompt'
export default {
data: {
componentName: 'Location Kit',
componentData: {},
deviceInfo: '',
isHuawei: false,
time: '',
geolocationGetData: {
latitude: '',
longitude: '',
altitude: '',
accuracy: '',
heading: '',
speed: '',
time: ''
},
geolocationListenData: {
latitude: '',
longitude: '',
time: '',
accuracy: ''
},
typeVaule: ''
},
onInit: function () {
this.$page.setTitleBar({ text: 'Location Kit' })
this.componentData = this.$t('message.interface.system.geolocation');
},
getGeolocation: function () {
var that = this;
if (that.isHuawei) {
prompt.showToast({
message: this.componentData.baiduMap
})
geolocation.getLocation({
coordType: "gcj02",
timeout: 2000,
success: function (ret) {
that.geolocationGetData = ret;
console.log(that.geolocationGetData.time);
var date = new Date(that.geolocationGetData.time);
that.geolocationGetData.time = date;
},
fail: function (erromsg, errocode) {
console.log('geolocation.getLocation----------' + errocode + ': ' + erromsg)
},
complete: function () {
console.log('geolocation complete----------')
}
})
} else {
prompt.showToast({
message: this.componentData.systemMap
})
geolocation.getLocation({
timeout: 2000,
success: function (ret) {
that.geolocationGetData = ret;
var time = new Date().getTime();
console.log(that.geolocationGetData.time);
var date = new Date(that.geolocationGetData.time);
that.geolocationGetData.time = date;
},
fail: function (erromsg, errocode) {
console.log('geolocation.getLocation----------' + errocode + ': ' + erromsg)
},
complete: function () {
console.log('geolocation complete----------')
}
})
}
},
listenGeolocation: function () {
var that = this;
geolocation.subscribe({
callback: function (ret) {
that.geolocationListenData = ret;
console.log(that.geolocationListenData.time);
var date = new Date(ret.time);
that.geolocationListenData.time = date;
},
fail: function (erromsg, errocode) {
console.log('geolocation.subscribe----------' + errocode + ': ' + erromsg)
}
})
},
cancelGeolocation: function () {
geolocation.unsubscribe();
},
getLocationType: function () {
var that = this;
geolocation.getLocationType({
success: function (data) {
that.typeVaule = data.types;
console.log("ret - " + data.types)
}
})
},
openLocation: function(){
geolocation.openLocation({
latitude: 12.972442,
longitude: 77.580643,
coordType:"gcj02",
name: "Bangalore",
address: "Bangalore",
scale: 18,
success: function () {
console.log('openLocation success .');
},
fail: function (erromsg, errocode) {
console.log('geolocation.openLocation----------' + errocode + ': ' + erromsg)
},
complete: function () {
console.log('openLocation complete.');
}
})
},
chooseLocation: function(){
console.log("chooseLocation");
geolocation.chooseLocation({
latitude: 12.972442,
longitude: 77.580643,
coordType:"gcj02",
success: function (data) {
console.log('chooseLocation success �� ' + JSON.stringify(data));
},
fail: function (error) {
console.log('chooseLocation fail : ' + error.message);
},
complete: function () {
console.log('chooseLocation complete.');
}
})
}
}
</script>
Result
Conclusion
In this article, we have learnt how to integrate the Location kit in Quick App. In upcoming article I will come up with new concept.
Reference
Location kit official document