标签：function geolocation 内置 console log 查看 ret errorCode 导航
使用快应用内置地图查看、导航位置。仅限中国大陆使用，需要获取设备定位权限。
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>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
标签：function,geolocation,内置,console,log,查看,ret,errorCode,导航 来源： https://blog.51cto.com/u_14772288/2726380
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。