Huawei Developers
Published in

Huawei Developers

How to Enable Location and Navigation Functions for the Built-in Map of a Quick App?

Users can view a location in the built-in map of a quick app. This function is available only in the Chinese mainland. Your quick app needs to obtain the location permission of the device.

Call chooseLocation to allow users to select or search for a location. After the location is specified, its longitude and latitude will be returned. Then, call openLocation for navigation.

By default, DiDi of the quick app form is displayed in the navigation app. Baidu Maps and AutoNavi Maps are displayed for selection only when they are installed on the user device.

The following sample code uses deep link redirection as an example:

router.push({
uri: 'pages/openLocation',
params: {
name: 'Palace Museum',
address: '4 Jingshan Front St, Dongcheng District, Beijing',
scale: 17,
latitude:116.397067,
longitude:39.917399
}
})

Sample code of the .ux file in the quick app:

1. Create a page layout, including a map, an address box, the current location control, and a navigation button. The sample code is as follows:

<template>
<div class="container">
<div class="page-title-wrap">
<text class="page-title">{{componentName}}</text>
</div>
<div class="item-container">
<div class="item-container">
<div class="item-content">
<text>{{$t('message.interface.system.geolocation.deviceInfo')}}</text>
<text>{{deviceInfo}}</text>
<text>{{$t('message.interface.system.geolocation.isHuawei')}}{{isHuawei}}</text>
</div>
<input type="button" class="btn" onclick="getDeviceInfo"
value="{{$t('message.interface.system.geolocation.getDeviceInfo')}}" />
</div>
<div class="item-content">
<text class="txt">{{$t('message.interface.system.geolocation.getGeolocation')}}</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('message.interface.system.geolocation.getGeolocationBtn')}}" />
<div class="item-content">
<text class="txt">{{$t('message.interface.system.geolocation.geolocation')}}</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('message.interface.system.geolocation.listenGeolocation')}}" />
<input type="button" class="btn" onclick="cancelGeolocation"
value="{{$t('message.interface.system.geolocation.cancelGeolocation')}}" />
<div class="item-content">
<text class="txt">{{$t('message.interface.system.geolocation.type')}}{{typeVaule}}</text>
</div>
<input type="button" class="btn" onclick="getLocationType"
value="{{$t('message.interface.system.geolocation.getLocationType')}}" />
<input type="button" class="btn" onclick="openLocation" value="openLocation" />
<input type="button" class="btn" onclick="chooseLocation" value="chooseLocation" />
<input type="button" class="btn" onclick="geocodeQuery" value="geocodeQuery" />
<input type="button" class="btn" onclick="reverseGeocodeQuery" value="reverseGeocodeQuery" />
</div>
</div>

2. The sample code of the page style is as follows. You can also customize your style.

<style>
@import '../../../Common/css/common.css';
.item-container {
margin-bottom: 50px;
margin-right: 60px;
margin-left: 60px;
flex-direction: column;
}
.item-content {
flex-direction: column;
background-color: #ffffff;
padding: 30px;
margin-bottom: 100px;
align-items: flex-start;
}
</style>

3. The sample code for the page JavaScript logic is as follows:

<script>
import geolocation from '@system.geolocation'
import device from '@system.device'
import prompt from '@system.prompt'
export default {
data: {
componentName: 'geolocation',
componentData: {},
deviceInfo: '',
isHuawei: false,
geolocationGetData: {
latitude: '',
longitude: '',
altitude: '',
accuracy: '',
heading: '',
speed: '',
time: ''
},
geolocationListenData: {
latitude: '',
longitude: '',
time: '',
accuracy: ''
},
typeVaule: '',
latitude: 0,
longitude: 0,
},
onInit: function () {
this.$page.setTitleBar({ text: 'geolocation' })
this.componentData = this.$t('message.interface.system.geolocation')
},
getDeviceInfo: function () {
var that = this
device.getInfo({
success: function (ret) {
that.deviceInfo = JSON.stringify(ret)
if (that.deviceInfo.indexOf('engineProvider') >= 0 && that.deviceInfo.indexOf('huawei') >= 0) {
that.isHuawei = true
} else {
that.isHuawei = false
}
},
fail: function (errorMsg, errorCode) {
that.deviceInfo = errorCode + ': ' + errorMsg
}
})
},
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
},
fail: function (errorMsg, errorCode) {
console.log('geolocation.getLocation----------' + errorCode + ': ' + errorMsg)
},
complete: function () {
console.log('geolocation complete----------')
}
})
} else {
prompt.showToast({
message: this.componentData.systemMap
})
geolocation.getLocation({
timeout: 2000,
success: function (ret) {
that.geolocationGetData = ret
},
fail: function (errorMsg, errorCode) {
console.log('geolocation.getLocation----------' + errorCode + ': ' + errorMsg)
},
complete: function () {
console.log('geolocation complete----------')
}
})
}
},
listenGeolocation: function () {
var that = this
geolocation.subscribe({
callback: function (ret) {
that.geolocationListenData = ret
},
fail: function (errorMsg, errorCode) {
console.log('geolocation.subscribe----------' + errorCode + ': ' + errorMsg)
}
})
},
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: 31.94830062319531,
longitude: 118.84177933970965,
coordType: 'gcj02',
name: 'Zhushan Park',
address: 'Zhushan Park',
scale: 18,
success: function () {
console.log('openLocation success .')
},
fail: function (errorMsg, errorCode) {
console.log('geolocation.openLocation----------' + errorCode + ': ' + errorMsg)
},
complete: function () {
console.log('openLocation complete.')
}
})
},
chooseLocation: function () {
console.log('chooseLocation')
geolocation.chooseLocation({
latitude: 31.948300696908,
longitude: 118.84177721902,
coordType: 'gcj02',
success: function (data) {
console.log('chooseLocation success : ' + JSON.stringify(data))
},
fail: function (errorMsg, errorCode) {
console.log('chooseLocation fail : ' + errorCode + ': ' + errorMsg)
},
complete: function () {
console.log('chooseLocation complete.')
}
})
},
geocodeQuery: function () {
console.log('geocodeQuery')
var that = this
geolocation.geocodeQuery({
// Parameters must be Chinese
city: 'Nanjing',
address: 'Nanjing University',
success: function (ret) {
that.latitude = ret.latitude
that.longitude = ret.longitude
console.info(`### geolocation.geocodeQuery ### ${ret.latitude}: ${ret.longitude}`)
},
fail: function (errorMsg, errorCode) {
console.info(`### geolocation.geocodeQuery ### ${errorCode}: ${errorMsg}`)
},
complete: function () {
console.log('geocodeQuery complete.')
}
})
},
reverseGeocodeQuery: function () {
var that = this
console.log('reverseGeocodeQuery')
geolocation.reverseGeocodeQuery({
latitude: that.latitude,
longitude: that.longitude,
coordType: 'gcj02',
includePoiInfo: true,
success: function (ret) {
console.info(`### geolocation.reverseGeocodeQuery ###` + JSON.stringify(ret))
},
fail: function (errorMsg, errorCode) {
console.info(`### geolocation.reverseGeocodeQuery ### ${errorCode}: ${errorMsg}`)
},
complete: function () {
console.log('reverseGeocodeQuery complete.')
}
})
}
}
</script>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store