《仿盒马》app开发技术分享-- 地图选点(27)

简介: 上一节我们实现了地图的简单展示,这一节我们要实现的内容是,根据展示的地图,实现当前定位功能,当前位置的poi地址功能,以及列表的展示,给地图添加标记,展示自己的当前定位

技术栈

Appgallery connect

开发准备

上一节我们实现了地图的简单展示,这一节我们要实现的内容是,根据展示的地图,实现当前定位功能,当前位置的poi地址功能,以及列表的展示,给地图添加标记,展示自己的当前定位

功能分析

要想实现这些功能,首先我们需要在地图加载之前获取当前的经纬度,根据经纬度查询附近的poi地址,然后我们获取这些poi地址展示到列表内,同时我们根据当前位置计算出与列表内地址的直线差距

代码实现

首先我们在展示的地图中添加标记以及视线当前位置的蓝点展示
private marker?: map.Marker;
this.mapController = mapController;
let location = await geoLocationManager.getCurrentLocation();
this.mapController.setMyLocation(location);
this.mapController.setMyLocationEnabled(true);
this.mapController.setMyLocationControlsEnabled(true);

              this.mapEventManager = this.mapController.getEventManager();
              let markerOptions: mapCommon.MarkerOptions = {
                position: {
                  latitude: location.latitude,
                  longitude: location.longitude
                },
                rotation: 0,
                visible: true,
                zIndex: 0,
                alpha: 1,
                anchorU: 0.5,
                anchorV: 1,
                clickable: true,
                draggable: true,
                flat: false
              };
              this.marker = await this.mapController.addMarker(markerOptions);
              this.marker!.setDraggable(false);
              this.marker!.setMarkerAnchor(1.0, 1.0);

这样我们就已经实现了地图上的标记以及当前位置的展示

接下来我们要实现的是获取到当前经纬度一定范围内的poi地址数据
首先定义一个加载完成的标识,以及接受列表
private addressList:Array|null=null

@State infoIsSuccess:boolean=false
然后根据当前的经纬度进行数据的请求
let params: site.NearbySearchParams = {
location: {
latitude: location.latitude,
longitude: location.longitude
},
radius: 5000,
poiTypes: ["EATING_DRINKING","SHOPPING","LEISURE"],
language: "ch",
pageIndex: 1,
pageSize: 10
};
const result = await site.nearbySearch(params);
this.addressList=result.sites!
if (result.sites!.length>0) {
this.infoIsSuccess=true
}else {
this.infoIsSuccess=false
}

现在使用我们定义好的变量接收数据,然后展示到列表上

List(){
ForEach(this.addressList,(item:site.Site,index:number)=>{
ListItem(){
Column(){
Column({space:10}){
Text(item.name)
.fontColor(Color.Black)
.fontSize(16)
.fontWeight(FontWeight.Bold)
Row(){
Text(this.calculateDistance(item.location?.latitude,item.location?.longitude,this.location?.latitude,this.location?.longitude).toFixed(2)+"公里")
.fontSize(14)
.fontColor(Color.Gray)
Text(" | ")
.fontSize(14)
.fontColor(Color.Gray)

                  Text(item.formatAddress)
                    .fontColor(Color.Gray)
                    .fontSize(14)
                    .textOverflow({ overflow: TextOverflow.Clip })
                    .maxLines(1)
                }
                .width('100%')
                .justifyContent(FlexAlign.Start)
              }
              .alignItems(HorizontalAlign.Start)
              .padding(10)
              .justifyContent(FlexAlign.Center)
              Divider().width('100%').height(0.8)
                .color("#e6e6e6")
            }
            .onClick(()=>{
              showToast(JSON.stringify(item))
            })

          }
        })
      }
      .layoutWeight(1)
      .backgroundColor(Color.White)

这里我们计算距离,截取最后两位即可
toRadians(degree: number): number {
return degree * Math.PI / 180;
}

calculateDistance(lat1: number, lon1: number, lat2: number, lon2: number): number {
const R = 6371; // 地球平均半径,单位为公里
const dLat = this.toRadians(lat2 - lat1);
const dLon = this.toRadians(lon2 - lon1);

const a =
Math.sin(dLat / 2) Math.sin(dLat / 2) +
Math.cos(this.toRadians(lat1))
Math.cos(this.toRadians(lat2))
Math.sin(dLon / 2)
Math.sin(dLon / 2);

const c = 2 Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
const distance = R
c;

return distance;
}

到这里我们的数据展示就成功了

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

热门文章

最新文章