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

举报
yd_215151764 发表于 2025/06/30 10:28:17 2025/06/30
【摘要】 ## 技术栈Appgallery connect## 开发准备上一节我们实现了地图的简单展示,这一节我们要实现的内容是,根据展示的地图,实现当前定位功能,当前位置的poi地址功能,以及列表的展示,给地图添加标记,展示自己的当前定位## 功能分析要想实现这些功能,首先我们需要在地图加载之前获取当前的经纬度,根据经纬度查询附近的poi地址,然后我们获取这些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<site.Site>|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;
}

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

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。