# UniAppMapIntegrationDemo

**Repository Path**: scenario-samples/uni-app-map-integration-demo

## Basic Information

- **Project Name**: UniAppMapIntegrationDemo
- **Description**: 本示例使用了不同方法去集成地图功能，通过map组件集成腾讯地图，通过嵌入HarmonyOS组件集成高德地图。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-12
- **Last Updated**: 2025-12-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uni-app地图集成示例

## 场景介绍
本示例使用了不同方法去集成地图功能，通过[map组件](https://doc.dcloud.net.cn/uni-app-x/component/map.html#map)集成腾讯地图，通过[嵌入HarmonyOS组件](https://uniapp.dcloud.net.cn/tutorial/harmony/native-component.html#%E5%B5%8C%E5%85%A5%E9%B8%BF%E8%92%99%E5%8E%9F%E7%94%9F%E7%BB%84%E4%BB%B6)集成高德地图。

## 效果图
<img src="screenshots/output2.gif" width="200">  
<img src="screenshots/output.gif" width="200">

## 实现思路

**本示例涉及知识点。**
<br>

| 知识点 | 说明 | 备注 |
| - | - | - |
| [嵌入HarmonyOS组件](https://uniapp.dcloud.net.cn/tutorial/harmony/native-component.html) | 1. 在插件的ets文件中注册HarmonyOS组件，<br>2. 在Vue中使用embed组件来渲染注册好的HarmonyOS组件。 | 通过本示例的高德地图集成步骤，介绍嵌入HarmonyOS组件。 |
| [依赖适配](https://doc.dcloud.net.cn/uni-app-x/plugin/uts-for-harmony.html#%E9%85%8D%E7%BD%AEuts%E6%8F%92%E4%BB%B6%E4%BE%9D%E8%B5%96) | 在uts插件的config.json文件内可以配置三方依赖。 | 集成高德地图/华为地图分别配置了ohpm依赖和二进制依赖。 |
| [权限申请](https://uniapp.dcloud.net.cn/tutorial/harmony/runbuild.html#%E9%80%9A%E8%BF%87-uts-%E6%8F%92%E4%BB%B6%E9%85%8D%E7%BD%AE%E9%B8%BF%E8%92%99%E6%9D%83%E9%99%90) | 1. 在uts插件的module.json5文件中可以声明权限。<br>2. [UTSHarmony.requestSystemPermission](https://doc.dcloud.net.cn/uni-app-x/uts/utsharmony.html#requestsystempermission-permissions-success-fail)方法可以申请权限。 | 本示例在hongmeng-amap插件中声明的所需的权限，在hongmeng-permission插件中封装了申请权限的方法。 |
| [生命周期注册](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle) | 本示例在onShow生命周期中，申请了权限 | 触发时机同UIAbility.onForeground |

**一、通过[map组件](https://doc.dcloud.net.cn/uni-app-x/component/map.html#map)集成地图。**
目前[map组件](https://doc.dcloud.net.cn/uni-app-x/component/map.html#map)在HarmonyOS上仅支持腾讯地图，通过[uni.createMapContext](https://uniapp.dcloud.net.cn/api/location/map.html#createmapcontext)方法获取[mapContext](https://uniapp.dcloud.net.cn/api/location/map.html#mapcontext)可以用来操作地图，经过验证mapContext对象的getCenterLocation和moveToLocation方法已经适配了HarmonyOS平台，其余未验证的方法请以[mapContext](https://uniapp.dcloud.net.cn/api/location/map.html#mapcontext)文档为准。
1. 腾讯位置服务的key可以参考[工程配置](https://lbs.qq.com/mobile/harmonyMapSDK/guide/createProject/config)去申请。首先打开腾讯位置服务的[控制台](https://lbs.qq.com/dev/console/application/mine)，登录或注册开发者。<br>
   <img src="screenshots/img_2.png" width="200">
2. 然后在腾讯位置服务控制台创建应用。<br>
   <img src="screenshots/img_3.png" width="200">
3. 在刚刚创建的应用上，点击添加key。<br>
   <img src="screenshots/img_4.png" width="200">
4. 点击uni-app项目的manifest.json文件，找到HarmonyOS应用配置，将腾讯位置服务的key配置上去。<br>
   <img src="screenshots/img_5.png" width="200">
5. 调用[mapContext.moveToLocation](https://uniapp.dcloud.net.cn/api/location/map.html#mapcontext)方法将地图中心移到当前定位。
```Vue
<template>
  <view class="content">
    <map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
    <button class="button" @click="moveToLocal">移动到当前定位点</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        latitude: 39.9042,
        longitude: 116.4041,
      }
    },
    onReady() {
      this._mapContext = uni.createMapContext("map", this);
    },
    methods: {
      moveToLocal() {
        this._mapContext.moveToLocation({
          success: (result) => {
            console.info(`move success!`)
          },
          fail: () => {
            console.error(`move fail!`)
          }
        });
      }
    }
  }
</script>

<style>
  .button {
    width: 100%;
    margin: 10px;
  }

  .content {
    height: 100%;
    width: 100%;
  }

  .map {
    height: 30%;
    width: 100%;
  }
</style>
```

**二、嵌入高德地图组件。**
1. 高德SDK可以从OHPM中心仓获取，可以直接将依赖配置到插件的config.json文件中。<br>
   <img src="screenshots/img_6.png" width="200">

2. 将“获取定位权限”和“获取模糊定位权限”声明拷贝到插件hongmeng-amap中。<br>
   <img src="screenshots/img_7.png" width="200">

3. 将.ets地图页和资源文件直接拷贝到插件hongmeng-amap中。<br>
   <img src="screenshots/img_8.png" width="200">

4. 注册HarmonyOS组件Amap，标签为“amapbuilder”。<br>
   <img src="screenshots/img_9.png" width="200">

5. 新建uts文件，引入定义的.ets文件。<br>
   <img src="screenshots/img_10.png" width="200">

6. 在页面中引入标签“amapbuilder”。<br>
   <img src="screenshots/img_11.png" width="200">

7. 在[onShow生命周期](https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle)中申请权限，触发时机同UIAbility.onForeground。<br>
   <img src="screenshots/img_12.png" width="200">

**三、嵌入华为地图组件。**

1. 本示例将华为地图页面封装进了maps功能模块，将地图初始化参数的方法封装进了utils功能模块，maps模块依赖utils模块。<br>
   <img src="screenshots/img_13.png" width="200">

2. 将utils模块和maps模块编译成.har文件，然后在插件hongmeng-huaweimap中新增hars文件夹用于存放这两个.har文件，同时在config.json中配置依赖。<br>
   <img src="screenshots/img_14.png" width="200">

3. 注册模块中的HuaweiMap组件，标签为“huaweimapbuilder”。<br>
   <img src="screenshots/img_15.png" width="200">

4. 新建uts文件，引入定义的.ets文件。<br>
   <img src="screenshots/img_16.png" width="200">

5. 在.Vue文件中的embed组件中引入注册好的标签。<br>
   <img src="screenshots/img_17.png" width="200">


**四、uni-app嵌入地图组件总结。**
<br>

| 操作顺序 | 说明 | 备注                                                                 |
| - | - |--------------------------------------------------------------------|
| [注册HarmonyOS组件](https://uniapp.dcloud.net.cn/tutorial/harmony/native-component.html#%E6%B3%A8%E5%86%8C%E9%B8%BF%E8%92%99%E5%8E%9F%E7%94%9F%E7%BB%84%E4%BB%B6) | 1. 将HarmonyOS页面、权限、资源文件拷贝到插件中，<br>2. 使用defineNativeEmbed方法注册组件，并设定标签名。 | 高德地图SDK可以从OHPM中心仓获取，在uni-app应用中仅需要配置到插件的config.json文件中，即可使用SDK的功能。 |
| [调用HarmonyOS组件](https://uniapp.dcloud.net.cn/tutorial/harmony/native-component.html#%E8%B0%83%E7%94%A8%E9%B8%BF%E8%92%99%E5%8E%9F%E7%94%9F%E7%BB%84%E4%BB%B6) | 在Vue文件中用embed组件来渲染注册好的HarmonyOS组件，embed的属性包含：<br>1. tag：填写注册后的标签名。<br>2. options：填写HarmonyOS组件的参数集。 | /                                                                  |

## 约束与限制

* 本示例支持API Version 20 Release及以上版本。
* 本示例支持HarmonyOS 6.0.0 Release SDK及以上版本。
* 本示例需要使用DevEco Studio 6.0.0 Release及以上版本进行编译运行。

## 权限说明

* 允许应用获取设备模糊位置信息：[ohos.permission.APPROXIMATELY_LOCATION](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/permissions-for-all-user#ohospermissionapproximately_location)，
* 允许应用获取设备位置信息：[ohos.permission.LOCATION](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/permissions-for-all-user#ohospermissionlocation)。


## 工程目录

```
├─arkTSMapsDemo                             // 原HarmonyOS工程，通过ArkTS API集成地图。
├─hars                                      // 二进制依赖文件目录。
├─App.vue
├─index.html
├─main.js
├─manifest.json                             // 应用相关配置
├─pages.json
├─uni.scss
├─harmony-configs                           // harmony工程定制化配置目录。
├─pages
│  └─index
│      └─index.vue                          // 主页面
│          
├─static                                    // 静态资源文件夹
├─uni_modules                               // 插件目录，存放uniapp的插件
│   └─hongmeng-amap                         
│   └─hongmeng-huaweimap                    
│   └─hongmeng-permission                   
```

## 参考文档

[嵌入HarmonyOS组件](https://uniapp.dcloud.net.cn/tutorial/harmony/native-component.html#%E5%B5%8C%E5%85%A5%E9%B8%BF%E8%92%99%E5%8E%9F%E7%94%9F%E7%BB%84%E4%BB%B6)<br>
[HarmonyOS NEXT 地图SDK](https://lbs.amap.com/api/harmonyosnext-map3d-sdk/gettingstarted)<br>
[uni.createMapContext](https://uniapp.dcloud.net.cn/api/location/map.html#createmapcontext)<br>
[腾讯位置服务工程配置指南](https://lbs.qq.com/mobile/harmonyMapSDK/guide/createProject/config)<br>
<br>