uni-app 引入高德地图
一、准备工作：申请密钥与环境配置
1. 申请高德地图 API 密钥
- 注册并登录高德开放平台
- 创建「Web 端 (JS API)」类型应用，获取API 密钥（Key）✅ 注意：需在「安全设置」中添加域名（如https://*.yourdomain.com）
2. uni-app 项目配置
方式一：使用官方插件（推荐 H5/APP 端）
- 在 HBuilderX 中打开「插件市场」，搜索「高德地图 JS API」并安装
- 或通过 npm 安装：
TypeScript
取消自动换行复制
npm install @amap/amap-jsapi-loader --save
方式二：小程序端（需微信小程序配置）
- 在微信小程序后台「开发设置」中添加高德地图域名白名单：
TypeScript
取消自动换行复制
https://restapi.amap.com
https://webapi.amap.com
二、基础地图展示：3 步渲染地图
1. 创建地图容器
TypeScript
取消自动换行复制
2. 初始化高德地图
TypeScript
取消自动换行复制
3. 小程序端特殊处理（需调整）
TypeScript
取消自动换行复制
// 小程序端使用uni.request加载API（避免跨域）
uni.request({
url: 'https://webapi.amap.com/maps?v=2.0&key=你的Key&callback=initMap',
dataType: 'script',
success: (res) => {
// 地图初始化逻辑同上
}
});
三、常用功能实现：标记点与定位
1. 添加自定义标记点
TypeScript
取消自动换行复制
// 在initMap中添加标记
const marker = new AMap.Marker({
position: [116.4039, 39.9144], // 标记坐标
icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png', // 自定义图标（可选）
title: '北京' // 鼠标悬停提示
});
map.add(marker); // 将标记添加到地图
2. 获取用户当前位置
TypeScript
取消自动换行复制
// 申请定位权限（需在manifest.json配置GPS权限）
uni.getLocation({
type: 'wgs84',
success: (res) => {
const currentLngLat = [res.longitude, res.latitude];
// 在当前位置添加标记
const currentMarker = new AMap.Marker({ position: currentLngLat });
map.add(currentMarker);
// 地图定位到当前位置
map.setCenter(currentLngLat);
}
});
四、交互优化：信息窗口与搜索
1. 点击标记显示信息窗口
TypeScript
取消自动换行复制
// 创建信息窗口
const infoWindow = new AMap.InfoWindow({
content: '
offset: new AMap.Pixel(0, -30) // 窗口位置偏移
});
// 绑定标记点击事件
marker.on('click', () => {
infoWindow.open(map, marker.getPosition());
});
2. 地点搜索功能（POI 搜索）
TypeScript
取消自动换行复制
// 初始化搜索插件（需在AMapLoader中声明plugins: ['AMap.PlaceSearch']）
const placeSearch = new AMap.PlaceSearch({
city: '北京', // 搜索城市
map: map // 关联地图实例
});
// 执行搜索
placeSearch.search('天安门', (status, result) => {
if (status === 'complete') {
const lngLat = result.poiList.pois[0].location.split(',').map(Number);
map.setCenter(lngLat); // 地图定位到搜索结果
}
});
五、实战案例：门店位置展示
完整页面代码
TypeScript
取消自动换行复制
六、常见问题与解决方案
| 问题 |
解决方案 |
| 地图黑屏 / 不显示 |
1. 检查 API 密钥是否正确2. H5 端确保域名在高德白名单3. 小程序端添加域名白名单 |
| 定位失败 |
1. 确认手机开启定位权限2. manifest.json 中配置GPS定位权限（APP 端） |
| 标记点击无反应 |
确保标记实例绑定了正确的地图实例（map.add(marker)） |
| 搜索无结果 |
检查搜索关键词是否正确，或添加city: '全国'扩大搜索范围 |
总结
在 uni-app 中集成高德地图只需掌握三个核心步骤：
- 申请密钥并配置环境 → 2. 初始化地图实例 → 3. 添加功能组件（标记 / 定位 / 搜索）通过官方提供的 JS API 和插件，可快速实现地图展示、位置服务、POI 搜索等功能。建议从高德开放平台文档获取更多进阶功能（如路线规划、行政区划查询）。