UniApp将高德SDK打包为H5需完成以下步骤：在高德开放平台申请Web端Key并获取安全密钥；下载高德Web SDK，将相关JS文件（如main.js）放入项目public目录；然后在index.html中通过script标签引入SDK；接着在manifest.json的H5配置中添加高德地图域名白名单（如*.amap.com）；最后在页面中调用高德API（如new AMap.Map）实现地图功能，需注意H5打包时确保使用HTTPS协议，避免跨域问题，并测试地图正常加载。
UniApp集成高德SDK并构建H5应用完整指南
在UniApp开发中,H5端通常需要集成地图功能（如定位、路径规划、标记点展示等），高德地图作为国内领先的地图服务提供商，其SDK提供了丰富的地图接口和功能支持，本文将全面介绍如何将高德地图SDK集成到UniApp项目中，并成功构建为可运行的H5应用，涵盖从申请密钥到部署上线的完整流程。
准备工作
申请高德地图Key
- 访问高德开放平台，完成注册并登录账号；
- 在控制台创建新应用,选择"Web端(JS API)"作为应用类型；
- 填写应用名称（如"UniApp H5地图示例"）及应用描述；
- 在"应用管理"→"我的应用"中，获取Web端JS API的Key值；
- 安全提示：妥善保管您的Key，避免在公开代码库中直接暴露，建议使用环境变量或配置文件管理。
创建UniApp项目
- 使用HBuilderX创建新项目,可选择"默认模板"或"Vue3模板"（推荐Vue3以获得更好的性能）；
- 确保项目已包含
@dcloudio/uni-app等必要依赖（HBuilderX创建的项目默认已集成）； - 对于Vue3项目,建议同时安装
@vue/composition-api以获得更好的开发体验。
H5端配置基础信息
在项目根目录的manifest.json文件中，配置H5相关基本信息：
{
"name": "UniApp高德地图示例",
"appid": "__UNI__XXXXXXX",
"description": "集成高德地图的UniApp H5应用",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
"h5": {
"title": "高德地图集成示例",
"router": {
"mode": "hash",
"base": "/"
},
"optimization": {
"treeShaking": {
"enable": true
}
}
}
}
集成高德地图SDK
下载或引入高德JS SDK
CDN引入（推荐）
在项目根目录的index.html中添加高德JS API的CDN链接：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">UniApp H5地图</title>
<!-- 引入高德JS API，替换YOUR_KEY为申请的Key -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=YOUR_KEY&callback=initAMap"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script>
// 定义全局回调函数，通知Vue组件SDK已加载完成
function initAMap() {
if (window.Vue && window.Vue.prototype.$root) {
window.Vue.prototype.$root.$emit('amapLoaded');
}
}
</script>
</body>
</html>
本地引入SDK
- 从高德开放平台下载最新版本的JS SDK文件；
- 将文件放入项目
public目录（如public/js/amap.js）； - 在
index.html中通过相对路径引入：
<script type="text/javascript" src="/js/amap.js"></script>
两种方式对比：
- CDN方式：无需维护SDK文件，自动获取最新版本，但依赖网络环境
- 本地方式：可离线使用，版本可控，但需自行更新SDK文件
配置H5域名白名单
高德JS API对请求域名有安全限制，需在manifest.json的h5节点中配置相关域名：
{
"h5": {
"domain": {
"normal": [
"https://webapi.amap.com",
"https://vdata.amap.com",
"https://restapi.amap.com",
"https://geocode.amap.com"
]
}
}
}
创建地图组件
在pages/index/index.vue中编写地图初始化代码：
<template>
<view class="map-container">
<!-- 地图容器，必须设置宽高 -->
<div id="map" class="map-view"></div>
<!-- 加载提示 -->
<view v-if="!mapLoaded" class="loading-tip">地图加载中...</view>
</view>
</template>
<script>
export default {
data() {
return {
map: null,
mapLoaded: false
};
},
onLoad() {
// 监听SDK加载完成事件
if (window.Vue) {
window.Vue.prototype.$root.$on('amapLoaded', this.initMap);
} else {
// 兼容非Vue环境
this.initMap();
}
},
onUnload() {
// 组件卸载时清理事件监听
if (window.Vue) {
window.Vue.prototype.$root.$off('amapLoaded', this.initMap);
}
},
methods: {
initMap() {
// 确保高德SDK已加载
if (window.AMap) {
try {
// 初始化地图实例
this.map = new window.AMap.Map('map', {
zoom: 11, // 缩放级别
center: [116.397428, 39.90923], // 中心点坐标（北京天安门）
viewMode: '2D', // 2D/3D视图
resizeEnable: true // 自适应容器大小
});
// 添加地图控件
this.map.addControl(new window.AMap.Scale());
this.map.addControl(new window.AMap.ToolBar());
this.map.addControl(new window.AMap.ControlBar({
position: {right: '10px', top: '10px'}
}));
// 添加标记点
const marker = new window.AMap.Marker({
position: [116.397428, 39.90923],
title: '北京天安门',
animation: 'AMAP_ANIMATION_DROP' // 标记点动画效果
});
this.map.add(marker);
// 添加信息窗体
const infoWindow = new window.AMap.InfoWindow({
content: `<div class="info-window">
<h3>北京天安门</h3>
<p>中国北京市东城区东长安街</p>
</div>`,
offset: new window.A
