《仿盒马》app开发技术分享-- 定位获取(25)

简介: 上一节我们实现了地址管理页面的数据查询和展示,接下来我们要实现的功能是地址添加相关的,我们想实现的功能是地图选点,那么在地图选点之前我们要做的就是先获取用户当前的定位。获取定位后我们拿到经纬度和其他信息,然后在对应的地图上展示。

技术栈

Appgallery connect

开发准备

上一节我们实现了地址管理页面的数据查询和展示,接下来我们要实现的功能是地址添加相关的,我们想实现的功能是地图选点,那么在地图选点之前我们要做的就是先获取用户当前的定位。获取定位后我们拿到经纬度和其他信息,然后在对应的地图上展示。

功能分析

要想实现定位功能,首先我们需要给应用申请定位权限,然后我们每次进入页面之前需要先进行定位功能是否开启的判断,如果没有开启我们要提示用户去开启,之后我们才是对定位请求的开启判断,用户同意之后获取当前的定位,在返回值中拿到经纬度

代码实现

首先我们在model.json5中添加对应的权限
{
"name": "ohos.permission.LOCATION",
"reason": "$string:app_location",
"usedScene": {
"abilities": [
"EntryAbility"
],
"when":"inuse"
}

  },
  {
    "name": "ohos.permission.APPROXIMATELY_LOCATION",
    "reason": "$string:app_reason_location",
    "usedScene": {
      "abilities": [
        "EntryAbility"
      ],
      "when":"inuse"
    }
  }
  添加完成后我们新建一个提交定位管理的页面,在生命周期中先进行手机是否开启定位的判断,并且新增两个变量来控制我们的定位触发

@State locationKey:boolean=false
@State addressSetting:boolean=false

aboutToAppear(): void {
try {
let locationEnabled = geoLocationManager.isLocationEnabled();
if (locationEnabled) {
this.addressSetting=true

  }else {
    this.addressSetting=false
  }
} catch (err) {
  console.error("errCode:" + err.code + ", message:"  + err.message);
}

}

如果用户开启了定位,并且我们没有开启应用的定位权限,在当前页面的底部提醒用户,去开启定位

build() {
Column() {
Stack({alignContent:Alignment.Bottom}){
Column(){

    }
    .layoutWeight(1)

    if (this.addressSetting&&!this.locationKey){
      Row(){
        Text()
          .width(40)

        Text("定位未开启")
          .fontColor(Color.Black)

        Text("开启定位")
          .fontColor(Color.White)
          .backgroundColor(Color.Pink)
          .borderRadius(10)
          .padding(10)
          .onClick(()=>{

          })
      }
      .padding(10)
      .borderRadius(5)
      .margin({bottom:30})
      .backgroundColor('#33000000')
      .justifyContent(FlexAlign.SpaceAround)
      .width('90%')
    }

  }
  .backgroundColor(Color.White)
  .height('100%')
  .width('100%')

}

}
因为在隐私合规的情况下,我们已经不能进入页面就执行权限的请求了,这一点很重要,我们执行代码看一下效果
在这里插入图片描述
当我们点击开启定位
.onClick(()=>{
this.reqPermissionsFromUser(permissions);
this.permissionController.open();
})
这里我们同步创建一个弹窗,当然你可以有多种选择来实现权限的同步说明,在这里我们两种方式都实现了
创建弹窗
@CustomDialog
export default struct PermissionDialogWidget{
@State titleText:string='';
@State contentText:string='';
controller: CustomDialogController
build(){
Column(){
Text(this.titleText).margin({top:10})
Text(this.contentText).margin({top:20,bottom:10})
}.justifyContent(FlexAlign.Start).padding({left:20,right:20})
}
}

引用弹窗
permissionController:CustomDialogController=new CustomDialogController({
builder:PermissionDialogWidget({
titleText:"权限说明",
contentText: 'xxx想要申请位置权限,用于地址选择等功能。同意该权限后,选择地址时会复用此权限,不会重新申请,不授权上述权限,不影响APP其他功能使用。',
}),
alignment: DialogAlignment.Top,
})
执行权限请求
reqPermissionsFromUser(permissions: Array): void {
let context = getContext(this) as common.UIAbilityContext;
let atManager = abilityAccessCtrl.createAtManager();
atManager.requestPermissionsFromUser(context, permissions).then((data) => {
let grantStatus: Array = data.authResults;
let length: number = grantStatus.length;
for (let i = 0; i < length; i++) {
if (grantStatus[i] === 0) {
this.locationKey=true
this.permissionController.close()
let request: geoLocationManager.SingleLocationRequest = {
'locatingPriority': geoLocationManager.LocatingPriority.PRIORITY_LOCATING_SPEED,
'locatingTimeoutMs': 10000
}
try {
geoLocationManager.getCurrentLocation(request).then((result) => {
console.log('current location: ' + JSON.stringify(result));
let locationInfo:geoLocationManager.ReverseGeoCodeRequest=result;
let reverseGeocodeRequest:geoLocationManager.ReverseGeoCodeRequest = {"latitude": locationInfo.latitude, "longitude": locationInfo.longitude, "maxItems": 1};
try {
geoLocationManager.getAddressesFromLocation(reverseGeocodeRequest, (err, data) => {
if (err) {
console.error('getAddressesFromLocation: err=' + JSON.stringify(err));
}
if (data) {
console.info('地址打印' + JSON.stringify(data));
}
});
} catch (err) {
console.error("errCode:" + err.code + ", message:" + err.message);
}
})
.catch((error:BusinessError) => {
console.error('promise, getCurrentLocation: error=' + JSON.stringify(error));
});
} catch (err) {
console.error("errCode:" + JSON.stringify(err));
}
} else {
this.locationKey=false
this.permissionController.close()
return;
}
}
}).catch((err:Error) => {
console.error(requestPermissionsFromUser failed, code is ${err.name}, message is ${err.message});
})
}

在这里我们既实现了自定义弹窗的同步说明,同时也在model.json5中配置了reason进行说明,可以按需进行实现。

在请求定位的返回信息中我们拿到了经纬度的信息,到这里我们实现了定位获取功能

相关文章
|
3天前
《仿盒马》app开发技术分享-- 确认订单页(数据展示)(29)
上一节我们实现了地址的添加,那么有了地址之后我们接下来的重点就可以放到订单生成上了,我们在购物车页面,点击结算会跳转到一个 订单确认页面,在这个页面我们需要有地址选择、加购列表展示、价格计算、优惠计算、商品数量展示等信息。
18 3
|
3天前
|
存储 缓存 前端开发
《仿盒马》app开发技术分享-- 用户登录页(业务逻辑)(21)
上一节我们实现了静态的用户登录页,这一节我们需要给他添加上业务逻辑,实现跟云数据库的互通,同时跟整个应用关联起来,因为我们还没有实现用户的注册页面,所以这里我们在云数据库的用户数据插入暂时先不做同用户名的校验,我们在云端先插入几条数据,暂时专注于查询即可
18 5
|
3天前
|
定位技术
《仿盒马》app开发技术分享-- 地图选点(27)
上一节我们实现了地图的简单展示,这一节我们要实现的内容是,根据展示的地图,实现当前定位功能,当前位置的poi地址功能,以及列表的展示,给地图添加标记,展示自己的当前定位
20 4
|
3天前
|
定位技术 API
《仿盒马》app开发技术分享-- 原生地图展示(26)
上一节我们实现了获取当前用户的位置,并且成功的拿到了经纬度,这一节我们就要根据拿到的经纬度,结合我们其他的知识点来实现地图的展示。
28 4
|
3天前
|
数据安全/隐私保护
《仿盒马》app开发技术分享-- 用户登陆页面(静态)(20)
上一节我们实现了个人中心页面的静态展示,项目进行到这里呢,我们也是时候添加用户相关的内容了, 因为到了后期,我们的数据都是跟用户绑定的,各个用户之间的数据并不互通,现在为了实现我们的用户绑定制度,我们需要给应用添加一个用户登陆的入口的
15 4
|
3天前
《仿盒马》app开发技术分享-- 个人中心页面(19)
上一节我们实现了分类页面的所有联动效果,这一节我们要开始完成一个新的页面,这个页面是我们主界面的第四个板块,就是个人中心页面。在这个模块,我们可以显示一些用户信息,以及用户相关的各类功能的入口
17 4
|
3天前
|
JSON 数据格式
《仿盒马》app开发技术分享-- 分类右侧商品列表(18)
上一节我们实现了分类页左侧二级分类列表功能,并实现了顶部列表&弹窗跟左侧列表的联动,这一节我们需要在它们联动的基础上继续添加右侧列表的联动效果
20 4
|
3天前
|
JSON 数据挖掘 数据格式
《仿盒马》app开发技术分享-- 分类左侧列表(17)
上一节我们实现了分类页面的顶部导航栏全选弹窗列表,并实现了跟顶部列表的点击选中联动效果,这一节我们要实现的功能是,分类模块的左侧列表,它同样也需要跟弹窗列表的点击,顶部列表的点击有联动的效果
14 4
|
3天前
|
数据库
《仿盒马》app开发技术分享-- 确认订单页(业务逻辑)(30)
上一节我们实现了确认订单页的页面绘制和价格计算优惠计算,订单列表展示等功能,这一节我们来实现确认订单页的整个业务逻辑。首先我们要实现的就是地址的选择,然后把我们计算的价格,商品列表等数据保存起来,然后我们开始创建订单表实体类等,把这些数据提交到订单表中
19 3
|
3天前
|
存储 定位技术 数据库
《仿盒马》app开发技术分享-- 新增地址(28)
上一节我们实现了地图选点,获取当前位置,在地图上添加标记,根据当前的定位获取poi地址列表等功能,这些全部都为了我们这一节而铺垫,这一节我们要实现的是新增地址,把我们的用户信息,填写收件人、门牌号、手机号、经纬度、详细地址等信息添加到我们的云数据库中,然后在地址查询列表里展示出来。
14 2

热门文章

最新文章

OSZAR »