如何使用快应用内置地图查看、导航位置
作者：互联网
使用快应用内置地图查看、导航位置。仅限中国大陆使用，需要获取设备定位权限。
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