uniapp 华为地图
时间: 2025-04-23 22:20:29 浏览: 18
### 如何在 UniApp 中集成华为地图 API
#### 准备工作
为了成功集成华为地图API,在项目启动前需完成一些准备工作。确保已经注册成为华为开发者并创建了应用,获取到相应的`apiKey`。此过程涉及登录[华为开发者联盟](https://developer.huawei.com/consumer/cn/)网站,并按照指引操作。
#### 配置环境变量
在项目的根目录下新建`.env.development`和`.env.production`文件来保存不同环境下使用的`apiKey`:
```plaintext
VUE_APP_HUAWEI_MAP_API_KEY=your_api_key_here
```
#### 安装依赖包
通过npm安装必要的插件以支持跨平台调用原生功能:
```bash
npm install @dcloudio/uni-hce --save
```
#### 修改 manifest.json 文件
针对 Android 平台,编辑 `manifest.json` 添加如下配置项以便于后续访问 HMS Core SDK 功能模块:
```json
{
...
"android": {
"permissions": [
"ACCESS_FINE_LOCATION",
"INTERNET"
],
"hmsPush": true,
"minSdkVersion": 21,
"targetSdkVersion": 30,
"mapKit": {
"apiKeyDebug": "$VUE_APP_HUAWEI_MAP_API_KEY",
"apiKeyRelease": "$VUE_APP_HUAWEI_MAP_API_KEY"
}
},
...
}
```
#### 编写页面逻辑
下面是一个简单的例子展示如何初始化地图组件以及设置标记点[^2]:
```html
<template>
<div id="app">
<!-- 地图容器 -->
<hm-map :api-key="$store.state.mapApiKey" ref="myMap"></hm-map>
<!-- 控制按钮 -->
<button @click="addMarker">Add Marker</button>
</div>
</template>
<script>
export default {
methods: {
addMarker() {
const mapObj = this.$refs.myMap.getMap();
let markerOptions = new window.HMSLocation.Marker({
position: { lat: 39.9042, lng: 116.4074 }, // 北京市经纬度坐标
title: 'Beijing',
snippet: 'Capital of China'
});
mapObj.addOverlay(markerOptions);
}
},
mounted(){
// 初始化完成后执行的操作可以放在这里
}
};
</script>
```
需要注意的是对于部分旧版本Android设备可能存在兼容性问题,特别是Android 8.1以下机型可能会遇到WebView渲染异常的情况。建议测试阶段充分考虑目标用户的终端分布情况,必要时提供降级方案或引导更新系统。
阅读全文
相关推荐


















