更新记录

1.0.0（2025-04-17）下载此版本

支持展示鸿蒙花瓣地图

平台兼容性

Vue2	Vue3
×	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 4.62，Android：不支持，iOS：不支持，HarmonyNext：支持	×	×	×	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序	鸿蒙元服务
×	×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
×	×	×	×	×	×	×	×	×

鸿蒙原生花瓣地图

鸿蒙系统有很多原生组件，从 uni-app 4.62 版开始可以通过 uts 插件方式注册为 WebView 支持的原生组件，并且支持同层渲染。本组件为 uniapp 在鸿蒙 Next 系统上使用同层渲染鸿蒙花瓣地图。

快速使用

基本示例，使用下面代码

<embed class="native-map" tag="map" :options='options' @markertap='onMarkerTap'></embed>

import "@/uni_modules/native-harmony-map";
export default {
  data() {
    return {
      options: {
        latitude: 39.909,
        longitude: 116.39742,
        scale: 12,
        circles: [
          {
            latitude: 39.909,
            longitude: 116.39743,
            color: 0xffff0000, 
            fillColor: 0xff00ffff, 
            radius: 80,
            strokeWidth: 10,
          },
        ],
        markers: [
          {
            latitude: 39.909,
            longitude: 116.39742

          },
          {
            latitude: 39.9,
            longitude: 116.39741,
            iconPath:
              "data:image/png;base64,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",
          },
        ],
      },
    };
  },
  methods: {
    onMarkerTap(e) {
      console.log("onMarkerTap", e);
      uni.showToast({
        title: "onMarkerTap",
      });
    },
  },
};

参数配置

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

属性

属性名	类型	说明
latitude	number	地图中心点纬度
longitude	number	地图中心点经度
scale	number	地图缩放级别
circles	Array	地图上的圆形覆盖物数组
markers	Array	地图上的标记点数组

circles 数组中的对象属性：

属性名	类型	说明
latitude	number	圆形覆盖物中心点纬度
longitude	number	圆形覆盖物中心点经度
color	number	圆形边框颜色，使用十六进制颜色值
fillColor	number	圆形填充颜色，使用十六进制颜色值
radius	number	圆形半径，单位：米
strokeWidth	number	圆形边框宽度，单位：像素

markers 数组中的对象属性：

属性名	类型	说明
latitude	number	标记点纬度
longitude	number	标记点经度
iconPath	string	标记点图标路径，支持 base64 格式图片

回调方法

属性名	说明
@markertap	Marker 点击事件

开发文档

鸿蒙花瓣地图（以下简称软件）源码使用许可协议

2022年10月

本许可协议，是数字天堂（北京）网络技术有限公司（以下简称DCloud）对其所拥有著作权的“软件”，提供的使用许可协议。

您对“软件”的复制、使用、修改及分发受本许可协议的条款的约束，如您不接受本协议，则不能使用、复制、修改本软件。

授权许可范围

a) 授予您永久性的、全球性的、免费的、非独占的、不可撤销的本软件的源码使用许可，您可以使用这些源码制作自己的应用。

b) 您只能在DCloud产品体系内使用本软件及其源码。您不能将源码修改后运行在DCloud产品体系之外的环境，比如客户端脱离uni-app，或服务端脱离uniCloud（如涉及uniCloud）。

c) DCloud未向您授权商标使用许可。您在根据本软件源码制作自己的应用时，需以自己的名义发布软件，而不是以DCloud名义发布。

d) 本协议不构成代理关系。

DCloud的责任限制 “软件”在提供时不带任何明示或默示的担保。在任何情况下，DCloud不对任何人因使用“软件”而引发的任何直接或间接损失承担责任，不论因何种原因导致或者基于何种法律理论,即使其曾被建议有此种损失的可能性。

您的责任限制

a) 您需要在授权许可范围内使用软件。

b) 您在分发自己的应用时，不得侵犯DCloud商标和名誉权利。

c) 您不得进行破解、反编译、套壳等侵害DCloud知识产权的行为。您不得利用DCloud系统漏洞谋利或侵害DCloud利益，如您发现DCloud系统漏洞应第一时间通知DCloud。您不得进行攻击DCloud的服务器、网络等妨碍DCloud运营的行为。未经书面许可，您不得利用DCloud的产品进行与DCloud争夺开发者的行为。

d) 如您违反本许可协议，需承担因此给DCloud造成的损失。

本协议签订地点为中华人民共和国北京市海淀区。

根据发展，DCloud可能会对本协议进行修改。修改时，DCloud会在产品或者网页中显著的位置发布相关信息以便及时通知到用户。如果您选择继续使用本框架，即表示您同意接受这些修改。

条款结束

鸿蒙花瓣地图 harmony map

更新记录

1.0.0（2025-04-17）下载此版本

平台兼容性

鸿蒙原生花瓣地图

快速使用

参数配置

回调方法

开发文档

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

鸿蒙花瓣地图（以下简称软件）源码使用许可协议

uni-ui

hello-uniapp 示例工程

uni-popup 弹出层

uni-icons 图标

uni-admin 基础框架

鸿蒙花瓣地图 harmony map

更新记录

1.0.0（2025-04-17） 下载此版本

平台兼容性

鸿蒙原生花瓣地图

快速使用

参数配置

回调方法

开发文档

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

鸿蒙花瓣地图（以下简称软件）源码使用许可协议

uni-ui

hello-uniapp 示例工程

uni-popup 弹出层

uni-icons 图标

uni-admin 基础框架

Modal title

1.0.0（2025-04-17）下载此版本