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>