如何在OpenHarmony地图上添加收藏

OpenHarmony 地图添加收藏的实现思路

在 OpenHarmony 的地图场景中，“收藏”通常包含两部分：一是在地图上新增一个可交互的标记（Marker）表示收藏点；二是将该点的数据持久化，以便下次进入应用时展示与恢复。实现上可使用 Map Kit 的 MapComponent/MapComponentController 完成地图与标注渲染，配合 Location Kit 的地理/逆地理编码完善地点名称，再用 关系型数据库 RDB 或 首选项 Preferences 持久化收藏数据。

实现步骤

• 前置配置
  在 AppGallery Connect 创建应用并获取 Client ID，在工程的 module.json5 中配置 metadata：name 为 client_id、value 为你的 Client ID，以启用地图能力。随后在页面中引入并使用 MapComponent 与 MapComponentController 完成地图初始化与交互。

• 添加收藏点
  通过长按地图获取屏幕坐标，使用 MapComponentController 在该位置添加 Marker；为便于展示与检索，建议同时保存经纬度、名称、地址、图标样式、创建时间等字段。若仅有坐标，可调用 Location Kit 的逆地理编码获取地址描述，提升可读性。

• 持久化存储
  采用 RDB 存储结构化的收藏记录（如 id、name、address、latitude、longitude、icon、createTime 等），便于条件查询、分页展示与同步；若仅做少量简单键值对，也可用 Preferences，注意在 put 后调用 flush 确保数据落盘，避免重启后读取为空。

• 展示与恢复
  应用启动时从本地数据库读取收藏列表，批量在地图上添加 Marker；为提升体验，可为收藏点设置自定义图标、信息窗（InfoWindow）点击查看详情，并支持删除与更新操作。

关键代码示例

• 数据模型与数据库建表（RDB）

// Favorite.ts
export interface Favorite {
  id: number;
  name: string;
  address: string;
  latitude: number;
  longitude: number;
  icon: string;
  createTime: number;
}

// 建表 SQL
const CREATE_TABLE_SQL = `
CREATE TABLE IF NOT EXISTS Favorite (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  name TEXT NOT NULL,
  address TEXT,
  latitude REAL NOT NULL,
  longitude REAL NOT NULL,
  icon TEXT,
  createTime INTEGER NOT NULL
)`;

• 添加收藏（地图与存储联动）

import dataRdb from '@ohos.data.rdb';
import { Favorite } from './Favorite';

// 假设你已初始化 rdbStore: dataRdb.RdbStore
async function addFavorite(
  store: dataRdb.RdbStore,
  name: string,
  address: string,
  lat: number,
  lng: number,
  icon: string
): Promise<void> {
  const favorite: Favorite = {
    id: 0, // 自增
    name,
    address,
    latitude: lat,
    longitude: lng,
    icon,
    createTime: Date.now()
  };

  const valueBucket: dataRdb.ValuesBucket = {
    'name': favorite.name,
    'address': favorite.address,
    'latitude': favorite.latitude,
    'longitude': favorite.longitude,
    'icon': favorite.icon,
    'createTime': favorite.createTime
  };

  await store.insert('Favorite', valueBucket); // 插入数据库
  // 同时将 Marker 添加到地图（示例变量名：mapController）
  // mapController.addMarker({ position: { lat, lng }, title: name, icon: icon });
}

• 启动时恢复收藏到地图

import { Favorite } from './Favorite';

async function loadFavoritesToMap(
  store: dataRdb.RdbStore,
  mapController: any // 你的 MapComponentController 实例
): Promise<void> {
  const predicates = new dataRdb.RdbPredicates('Favorite');
  predicates.orderByDesc('createTime');
  const resultSet: dataRdb.ResultSet = await store.query(predicates);

  while (resultSet.goToNextRow()) {
    const fav: Favorite = {
      id: resultSet.getLong(resultSet.getColumnIndex('id')),
      name: resultSet.getString(resultSet.getColumnIndex('name')),
      address: resultSet.getString(resultSet.getColumnIndex('address')),
      latitude: resultSet.getDouble(resultSet.getColumnIndex('latitude')),
      longitude: resultSet.getDouble(resultSet.getColumnIndex('longitude')),
      icon: resultSet.getString(resultSet.getColumnIndex('icon')),
      createTime: resultSet.getLong(resultSet.getColumnIndex('createTime'))
    };
    // 添加到地图
    // mapController.addMarker({ position: { lat: fav.latitude, lng: fav.longitude }, title: fav.name, icon: fav.icon });
  }
  resultSet.close();
}

交互与扩展建议

• 交互优化：支持长按添加、列表页勾选批量删除、拖动排序、名称编辑；为收藏点增加自定义图标与信息窗，点击可查看详情或发起导航。
• 数据一致性：写入 Preferences 后务必 flush；使用 RDB 时合理建立索引（如对 createTime 建立索引）以提升查询性能。
• 体验增强：结合 Location Kit 的地理编码/逆地理编码，在仅有名称时获取坐标，或在仅有坐标时补全地址，提升收藏点的可用性。