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