HarmonyOS 鸿蒙Next 旅游应用案例

HarmonyOS 鸿蒙Next 旅游应用案例

介绍

本示例构建了一个简单的旅游应用，应用案例内主要包含以下三种功能。

  • 通过列表展示用户动态信息
  • 通过地图功能展示旅游景点位置
  • 通过列表展示旅游景点信息

旅游应用案例源码链接

效果图

图片名称

使用说明

  1. 进入应用后，首先弹出访问位置权限，同意后应用即可使用位置权限。
  2. 主页点击发现按钮即可进入地图发现旅游景点。
  3. 后续点击列表按钮，可以以列表形式展示各个旅游景点的信息。
  4. 返回到主页后点击动态按钮即可进入动态页面，以列表形式展示动态信息。

依赖配置

在entry\src\main\ets\entryability\EntryAbility.ts中做如下配置请求用户开启地图定位服务权限，首次进入程序时 需向用户弹窗请求开启以下权限。

const permissions: Array<Permissions> = [
    'ohos.permission.LOCATION',
    'ohos.permission.APPROXIMATELY_LOCATION'
];

实现思路

动态页实现

使用List实现动态列表的呈现，使用LazyForEach实现性能优化。

List() {
    LazyForEach(this.trendsListData, (item: Trends, index: number) => {
    ListItem() {
        TrendsItem({ trendsItemData: item })
    }
    })
}

地图页实现

  1. 实现地图初始化，设置地图中心点坐标及层级；实现标记点初始化；实现地图初始化的回调。
this.mapOption = {
    ···
};
this.markerOptions = {
    ···
};
this.callback = async (err, mapController) => {
    ···
};
  1. 通过以动画形式移动地图相机，实现移动到坐标点并标记功能。
mapCameraPosition(location: mapCommon.LatLng, siteId?: string) {
let zoom = 20;
let cameraUpdate = map.newLatLng(location, zoom);
this.mapController?.animateCamera(cameraUpdate, 1000);
this.addMapMaker(location, siteId)
}
  1. 通过创建Maker，实现地图上增加标记点功能。
addMapMaker(location: mapCommon.LatLng, siteId?: string) {
this.mapController?.clear();
let markerOptions: mapCommon.MarkerOptions = {
    ···
};
this.mapController?.addMarker(markerOptions);
}
  1. 通过构造queryLocation函数，实现查询地点详情功能。
queryLocation(id: string) {
let queryLocationOptions: sceneMap.LocationQueryOptions = {
    siteId: id
};
···
}
  1. 通过构造chooseLocation函数，实现地图选点功能。
  chooseLocation(location: mapCommon.LatLng) {
    let locationChoosingOptions: sceneMap.LocationChoosingOptions = {
      location: location,
      searchEnabled: true,
      showNearbyPoi: true
    };
···
  }
  1. 通过调用getCurrentLocation()，获取当前位置并将视图移动过去；创建CameraUpdate对象；以动画方式移动地图相机。
  getMyLocation() {
    geoLocationManager.getCurrentLocation().then(async (result) => {
      let position: geoLocationManager.Location = {
        ···
      };

  <span class="hljs-variable language_">this</span>.<span class="hljs-property">mapController</span>?.<span class="hljs-title function_">setMyLocation</span>(position);
  <span class="hljs-keyword">let</span> <span class="hljs-attr">gcj02Posion</span>: mapCommon.<span class="hljs-property">LatLng</span> = <span class="hljs-keyword">await</span> <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">convertCoordinate</span>(result.<span class="hljs-property">latitude</span>,result.<span class="hljs-property">longitude</span>)
  <span class="hljs-keyword">let</span> <span class="hljs-attr">latLng</span>: mapCommon.<span class="hljs-property">LatLng</span> = {

  };
  <span class="hljs-keyword">let</span> zoom = <span class="hljs-number">15</span>;
  <span class="hljs-keyword">let</span> cameraUpdate = map.<span class="hljs-title function_">newLatLng</span>(latLng, zoom);
  <span class="hljs-variable language_">this</span>.<span class="hljs-property">mapController</span>?.<span class="hljs-title function_">animateCamera</span>(cameraUpdate, <span class="hljs-number">1000</span>);
})

}

工程目录

entry/src/main/ets/
|---common/constant
|   |---CommonConstants.ets         // 常量
|   |---EvaluateItem.ets            // 用户评价列表item组件
|   |---TrendsItem.ets              // 用户动态列表item组件
|---entryability
|   |---EntryAbility.ets
|---entrybackupability
|   |---EntryBackupAbility.ets            
|---pages
|   |---DiscoveryPage.ets           // 发现页
|   |---Home.ets                    // 主页
|   |---ListIndex.ets               // 列表索引页
|   |---MapIndex.ets                // 地图索引页
|   |---MapLocationPage.ets         // 地图展示页
|   |---SceneDetailPage.ets         // 景点详情页
|---view
|   |---GoodsListComponent.ets      // 景点列表页组件
|   |---MapTabBarsComponent.ets     // 地图标签页组件
|   |---PutDownRefreshLayout.ets    // 下拉刷新组件
|   |---TabBarComponent.ets         // 列表标签页组件
|   |---TrendsView.ets              // 用户动态页视图
|---viewModel
|   |---EvaluateDataSource.ets      // 用户评价数据模型
|   |---InitialData.ets             // 初始化数据
|   |---ListDataSource.ets          // 景点列表数据模型
|   |---TrendsDataSource.ets        // 用户动态数据模型

约束与限制

  • IDE：DevEco Studio NEXT Developer Beta1 5.0.3.403

  • SDK：HarmonyOS NEXT Developer Beta1 SDK, based on OpenHarmony SDK Ohos_sdk_public 5.0.0.25 (API Version 12 Beta1)


更多关于HarmonyOS 鸿蒙Next 旅游应用案例的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS 鸿蒙Next 旅游应用案例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对“HarmonyOS 鸿蒙Next 旅游应用案例 场景化代码”的帖子，以下是一个简化的场景化代码示例，展示如何在HarmonyOS中实现一个旅游应用的特定功能，比如显示旅游景点信息。

// 注意：此代码为示意性内容，实际开发应使用ArkTS或ETS语言
@Entry
@Component
struct TravelApp {
    @State private destination: string = "故宫";

    @Builder
    build() {
        Column() {
            Text("当前景点: " + this.destination)
                .fontSize(20)
                .fontWeight(FontWeight.Bold)
                .margin(20)

            Button("更换景点") {
                this.changeDestination()
            }
        }
    }

    private changeDestination() {
        // 假设有一个景点列表，这里简单切换为“长城”
        this.destination = this.destination === "故宫" ? "长城" : "故宫";
    }
}

说明：

  • 以上代码为示意性质，实际在HarmonyOS开发中应使用ArkTS或ETS UI框架。
  • @Entry、@Component等注解用于定义组件和入口。
  • Column、Text、Button等组件用于构建UI界面。
  • this.state用于管理组件状态。
  • this.builder用于构建组件的UI结构。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部