共计 6850 个字符，预计需要花费 18 分钟才能阅读完成。
应用快利用内置地图查看、导航地位。仅限中国大陆应用，须要获取设施定位权限。
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
正文完