实现简单旅游应用鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

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

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

简单旅游应用实现源码链接

效果预览

使用说明

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) => {
    ···
};

2. 通过以动画形式移动地图相机，实现移动到坐标点并标记功能。

mapCameraPosition(location: mapCommon.LatLng, siteId?: string) {
let zoom = 20;
let cameraUpdate = map.newLatLng(location, zoom);
this.mapController?.animateCamera(cameraUpdate, 1000);
this.addMapMaker(location, siteId)
}

3. 通过创建Maker，实现地图上增加标记点功能。

addMapMaker(location: mapCommon.LatLng, siteId?: string) {
this.mapController?.clear();
let markerOptions: mapCommon.MarkerOptions = {
    ···
};
this.mapController?.addMarker(markerOptions);
}

4. 通过构造queryLocation函数，实现查询地点详情功能。

queryLocation(id: string) {
let queryLocationOptions: sceneMap.LocationQueryOptions = {
    siteId: id
};
···
}

5. 通过构造chooseLocation函数，实现地图选点功能。

  chooseLocation(location: mapCommon.LatLng) {
    let locationChoosingOptions: sceneMap.LocationChoosingOptions = {
      location: location,
      searchEnabled: true,
      showNearbyPoi: true
    };
···
  }

6. 通过调用getCurrentLocation()，获取当前位置并将视图移动过去；创建CameraUpdate对象；以动画方式移动地图相机。

  getMyLocation() {
    geoLocationManager.getCurrentLocation().then(async (result) => {
      let position: geoLocationManager.Location = {
        ···
      };

      this.mapController?.setMyLocation(position);
      let gcj02Posion: mapCommon.LatLng = await this.convertCoordinate(result.latitude,result.longitude)
      let latLng: mapCommon.LatLng = {

      };
      let zoom = 15;
      let cameraUpdate = map.newLatLng(latLng, zoom);
      this.mapController?.animateCamera(cameraUpdate, 1000);
    })
  }