阅读 1113

如何使用快应用内置地图查看、导航位置

使用快应用内置地图查看、导航位置。仅限中国大陆使用,需要获取设备定位权限。

chooseLocation 可以选择地理位置,也可以搜索位置,确定选择的位置后会返回一个经纬度坐标,然后使用 openLocation 进行导航。

导航app中默认显示滴滴出行快应用,百度地图和高德地图如果手机安装了才会显示。

使用方法(此处以deeplink****跳转为例):

router.push({
  uri: 'pages/openLocation',  
  params: {    
  name: '故宫',    
  address: '北京市东城区景山街前街4号',    
  scale: 17,    
  latitude:116.397067,    
  longitude:39.917399  
  }})
复制代码

快应用ux****页面实现:

  1. 首先写好页面的布局模板,展示一个地图,一个地址展示栏,一个导航按钮,一个我的位置控制组件,代码如下:

2. 样式如下,大家可以自定义

<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. 页面js逻辑

<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: '南京',
        address: '南京大学',
        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>
复制代码

效果图:

原文链接:developer.huawei.com/consumer/cn…

原作者:Mayism

文章分类
Android
文章标签