更新记录

1.0.0（2025-12-23） 下载此版本

鸿蒙花瓣地图

平台兼容性

uni-app(4.62)

uni-app x(4.62)

cr-uts-map 鸿蒙原生花瓣地图

快速使用

鸿蒙应用可免费使用鸿蒙系统提供的地图服务

开通方式：

• 登录 AGC 后台 选择开发与服务 - 选择应用 - 项目设置 - API 管理 - 开启地图服务

参考文档：

• ArkTS API

使用示例

<!-- 在 template 中使用, tag属性固定写 crmap -->
<embed class="map-container" tag="crmap" :options="mapOptions" @mapload="handleMapLoad"></embed>

// #ifdef APP-HARMONY
import type {
  IMapBuilderOptions,
  IMapEvent,
  IMapInstance,
} from "@/uni_modules/cr-uts-map";
import { mapInstanceSet } from "@/uni_modules/cr-uts-map";
// #endif

// #ifdef APP-HARMONY

// 地图实例
let mapInstance: IMapInstance | null = null;

/**
 * 地图组件参数
 */
const mapOptions: IMapBuilderOptions = {
  mapType: "STANDARD",
  dayNightMode: "AUTO",
  zoom: 10,
  minZoom: 2,
  maxZoom: 20,
  latitude: 39.909189,
  longitude: 116.397454,
};

/**
 * 地图组件初始化完成
 */
async function handleMapLoad(e: IMapEvent) {
  mapInstance = mapInstanceSet[e.detail.mapId];
  if (!(mapInstance && mapInstance.mapController)) {
    return;
  }
  // mapController 具体使用方式可参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller
  const { mapController } = mapInstance;
  mapController.setScaleControlsEnabled(true);

  // 加载热区：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-common#section1615694815308
  const polygon = {
    points: [
      { latitude: 41.893478, longitude: 116.4 },
      { latitude: 41.893478, longitude: 121.4 },
      { latitude: 45.893478, longitude: 121.4 },
      { latitude: 45.893478, longitude: 116.4 }
    ],
    holes: [],
  }
  const mapPolygon = await mapController.addPolygon(polygon)
}
// #endif

参数配置

在 Vue 文件中使用的 embed 组件是经过 uni-app 封装的，更便于使用，支持传递额外的属性和事件。

回调方法

注意事项

• 定义 tag 为小写
• 回调事件会小写