
简体中文
注意
Android 和 iOS 需 HBuilderX 4.41+
Harmony 需 HBuilderX 4.61+
App端的 openlocation 是一个独立的UTS插件,以满足自定义需求,请前往插件市场导入插件 uni-openlocation 插件地址
在使用 uni-openlocation 插件后,无论是在Web端还是App端,通过 uni.openlocation 打开的页面会以 dialogPage 的形式呈现。此时,当你执行 getDialogPages 方法时,会发现由 openlocation 打开的页面也包含在返回的页面数组中,这属于正常现象
HarmonyOS平台
调用此 API 需要申请定位权限ohos.permission.APPROXIMATELY_LOCATION
、ohos.permission.LOCATION
,需自行在项目中配置权限。
使用地图查看位置
Web | 微信小程序 | Android | iOS | HarmonyOS |
---|---|---|---|---|
4.0 | 4.41 | 4.41 | 4.41 | 4.61 |
名称 | 类型 | 必填 | 默认值 | 兼容性 | 描述 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
options | OpenLocationOptions | 是 | - | - | uni.openLocation | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |
---|---|---|---|---|---|
errMsg | string | 否 | - | 错误信息 |
名称 | 类型 | 必备 | 默认值 | 兼容性 | 描述 |
---|---|---|---|---|---|
errCode | number | 是 | - | - | |
errMsg | string | 否 | - | 错误信息 | |
errSubject | string | 是 | - | - | 统一错误主题(模块)名称 |
data | any | 否 | - | - | 错误信息中包含的数据 |
cause | Error | 否 | - | - | 源错误信息,可以包含多个错误,详见SourceError |
示例为hello uni-app x alpha分支,与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见
示例
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-common-mt">
<form @submit="openLocation">
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">经度</view>
</view>
<view class="uni-list-cell-db">
<input v-model.number="longitude" class="uni-input" type="text" :disabled="true" />
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">纬度</view>
</view>
<view class="uni-list-cell-db">
<input v-model.number="latitude" class="uni-input" type="text" :disabled="true" />
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">位置名称</view>
</view>
<view class="uni-list-cell-db">
<input v-model="name" class="uni-input" type="text" :disabled="true" />
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">详细位置</view>
</view>
<view class="uni-list-cell-db">
<input v-model="address" class="uni-input" type="text" :disabled="true" />
</view>
</view>
</view>
<view class="uni-padding-wrap">
<view class="tips">注意:需要正确配置地图服务商的Key才能正常显示位置</view>
<view class="uni-btn-v uni-common-mt">
<button type="primary" formType="submit">查看位置</button>
</view>
</view>
</form>
</view>
</view>
</template>
<script lang="uts" setup>
type DialogPagesNum = {
value: number
}
import {
state,
setLifeCycleNum
} from '@/store/index.uts'
// 响应式数据
const title = ref('openLocation')
const longitude = ref(116.39747)
const latitude = ref(39.9085)
const name = ref('天安门')
const address = ref('北京市东城区东长安街')
// 自动化测试
const dialogPagesNum = reactive({ value: -1 } as DialogPagesNum)
// 生命周期钩子
onPageShow(() => {
console.log("Page Show")
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
})
onPageHide(() => {
console.log("Page Hide")
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 1)
})
// 自动化测试
const test = () => {
const pages = getCurrentPages()
const page = pages[pages.length - 1]
// #ifdef APP || WEB
const dialogPages = page.getDialogPages()
dialogPagesNum.value = dialogPages.length
// #endif
}
// 方法
const openLocation = () => {
uni.openLocation({
longitude: longitude.value,
latitude: latitude.value,
name: name.value,
address: address.value
})
// 自动化测试
setTimeout(() => {
test()
}, 500)
}
// 自动化测试
const pageSetLifeCycleNum = (value: number) => {
setLifeCycleNum(value)
}
// 自动化测试
const getLifeCycleNum = (): number => {
return state.lifeCycleNum
}
defineExpose({
dialogPagesNum,
openLocation,
pageSetLifeCycleNum,
getLifeCycleNum,
})
</script>
<style>
.uni-list-cell-left {
padding: 0 15px;
}
.tips {
font-size: 12px;
margin-top: 15px;
opacity: .8;
}
</style>