View and navigate your location using the fast app’s built-in map. This operation is available only in mainland China. You must obtain the device location permission.

ChooseLocation can choose a geographic location, or it can search for a location, and the selected location will return a latitude and longitude coordinate, and then use openLocation for navigation.

The Didi Chuxing Kuaidi app is displayed by default in the navigation app. Baidu Map and Autonavi will only be displayed if the app is installed on the phone.

Usage (here deeplink**** jump as an example) :

Router. Push ({uri: 'pages/openLocation', params: {name: 'pages ', address: '4 Front Street, Dongcheng District, Beijing ', scale: 17, latitude: 116.397067, longitude: 39.917399}})Copy the code

Fast application UX **** page implementation:

  1. First write the layout template of the page, show a map, an address display bar, a navigation button, and a my location control component, the code is as follows:

2. The style is as follows, you can customize it

<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>Copy the code

3. Page JS logic

<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: The function () {the console. The log (' chooseLocation) geolocation. ChooseLocation ({longitude latitude: 31.948300696908: 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: 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>Copy the code

Effect:

The original link: developer.huawei.com/consumer/cn…

Original author: Mayism