应用快利用内置地图查看、导航地位。仅限中国大陆应用，须要获取设施定位权限。
chooseLocation 能够抉择地理位置，也能够搜寻地位，确定抉择的地位后会返回一个经纬度坐标，而后应用 openLocation 进行导航。
导航app中默认显示滴滴出行快利用，百度地图和高德地图如果手机装置了才会显示。
应用办法（此处以deeplink跳转为例）：
router.push({ uri: 'pages/openLocation', params: { name: '故宫', address: '北京市东城区景山街前街4号', scale: 17, latitude:116.397067, longitude:39.917399 }})快利用ux页面实现：
首先写好页面的布局模板，展现一个地图，一个地址展现栏，一个导航按钮，一个我的地位管制组件，代码如下：
<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>- 款式如下，大家能够自定义
<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>- 页面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/...
原作者：Mayism