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
取消自动换行复制
<template>
<view>
<!-- 地图容器，需指定宽高 -->
<view id="mapContainer" style="width: 100%; height: 500px;"></view>
</view>
</template>
2. 初始化高德地图
TypeScript
取消自动换行复制
<script>
// 引入高德地图加载器（H5/APP端）
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
onLoad() {
this.initMap();
},
methods: {
initMap() {
AMapLoader.load({
key: '你的API密钥', // 替换为申请的Key
version: '2.0', // API版本
AMapUI: { version: '1.1', plugins: ['geo/DistrictExplorer'] }, // 可选UI组件
Loca: { version: '2.0.0' }, // 可选Loca可视化组件
plugins: ['AMap.Geocoder', 'AMap.PlaceSearch'] // 按需加载插件
}).then((AMap) => {
// 初始化地图实例
const map = new AMap.Map('mapContainer', {
center: [116.4039, 39.9144], // 地图中心点（北京坐标）
zoom: 13, // 缩放级别
mapStyle: 'amap://styles/light' // 地图样式（浅色主题）
});
this.map = map; // 保存地图实例
}).catch((err) => {
console.error('高德地图加载失败', err);
});
}
}
};
</script>
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: '<div style="padding: 10px;">这是北京的标记点</div>', // 窗口内容
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
取消自动换行复制
<template>
<view>
<view id="mapContainer"></view>
<button @click="searchStore">搜索附近门店</button>
</view>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
data() {
return { map: null };
},
onLoad() {
this.initMap();
},
methods: {
initMap() {
AMapLoader.load({ key: '你的API密钥', plugins: ['AMap.PlaceSearch'] })
.then((AMap) => {
const map = new AMap.Map('mapContainer', { zoom: 15 });
this.map = map;
// 初始化显示当前位置（需先获取定位）
this.getLocation();
});
},
getLocation() {
uni.getLocation({
success: (res) => {
const lngLat = [res.longitude, res.latitude];
this.map.setCenter(lngLat);
}
});
},
searchStore() {
const placeSearch = new AMap.PlaceSearch({ map: this.map, city: '当前城市' });
placeSearch.search('便利店', (status, result) => {
if (status === 'complete') {
result.poiList.pois.forEach((poi) => {
const marker = new AMap.Marker({ position: poi.location.split(',').map(Number) });
this.map.add(marker);
});
}
});
}
}
};
</script>
六、常见问题与解决方案
| 问题 | 解决方案 |
| 地图黑屏 / 不显示 | 1. 检查 API 密钥是否正确2. H5 端确保域名在高德白名单3. 小程序端添加域名白名单 |
| 定位失败 | 1. 确认手机开启定位权限2. manifest.json 中配置GPS定位权限（APP 端） |
| 标记点击无反应 | 确保标记实例绑定了正确的地图实例（map.add(marker)） |
| 搜索无结果 | 检查搜索关键词是否正确，或添加city: '全国'扩大搜索范围 |
总结
在 uni-app 中集成高德地图只需掌握三个核心步骤：
- 申请密钥并配置环境 → 2. 初始化地图实例 → 3. 添加功能组件（标记 / 定位 / 搜索）通过官方提供的 JS API 和插件，可快速实现地图展示、位置服务、POI 搜索等功能。建议从高德开放平台文档获取更多进阶功能（如路线规划、行政区划查询）。