# PetalMaps

**Repository Path**: scenario-samples/petal-maps

## Basic Information

- **Project Name**: PetalMaps
- **Description**: 【鸿蒙 Harmony Next 示例 代码】uniapp通过uts插件拉起华为花瓣地图
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2024-12-27
- **Last Updated**: 2025-05-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uniapp通过uts插件拉起华为花瓣地图

## 效果图
![首页](./IMG1.PNG)
![花瓣地图](./IMG2.PNG)

## 实现思路
- 根据[uniapp的uts插件文档](https://uniapp.dcloud.net.cn/tutorial/harmony/native-api.html#nativeapi)，先调通uni.jumpMap接口调用鸿蒙api的通道。
- 华为花瓣地图涉及UI组件，需要在鸿蒙工程创建[花瓣地图页面](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/map-mapcomponent-V5)（pages/MapPage）展示地图。
- jumpMap的具体实现拉起pages/MapPage页面展示地图

## 工程操作说明
- 根据[uniapp文档](https://uniapp.dcloud.net.cn/tutorial/harmony/debug.html)配置配置工程环境。
- 点击顶部菜单栏运行到鸿蒙，会在工程根目录unpackage/debug目录下生成鸿蒙工程，把uniapp工程根目录下的MapPage.ets文件放在unpackage/debug/app-harmony@x.x.x/entry/src/main/ets/pages目录下。
- 打开main_pages.json5文件增加页面路径pages/MapPage。

## 华为地图准备事项
- [配置client_id](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/map-config-agc-V5#section10139103411502)。
- [开通地图服务](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/map-config-agc-V5#section16133115441516)。
- [配置手动签名](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-signing-V5#section297715173233)。
- [AGC平台上设置对应的公钥指纹](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/application-dev-overview-V5)。


## 一份简单的问卷反馈

亲爱的Harmony Next开发者，您好！<br>
为了协助您高效开发，提高鸿蒙场景化示例的质量，希望您在浏览或使用后抽空填写一份简单的问卷，我们将会收集您的宝贵意见进行优化:heart:

[:arrow_right: **点击此处填写问卷** ](https://wj.qq.com/s2/19042938/95ab/)

<div style="text-align: left;">