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

本文主要是介绍如何使用快应用内置地图查看、导航位置，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

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

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

使用方法（此处以deeplink跳转为例）：

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

快应用ux页面实现：

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

<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>
</template>

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>

效果图：

原文链接：https://developer.huawei.com/consumer/cn/forum/topic/0201422912819420605?fid=18

原作者：Mayism

这篇关于如何使用快应用内置地图查看、导航位置的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！