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 中集成高德地图只需掌握三个核心步骤：​

1. 申请密钥并配置环境 → 2. 初始化地图实例 → 3. 添加功能组件（标记 / 定位 / 搜索）通过官方提供的 JS API 和插件，可快速实现地图展示、位置服务、POI 搜索等功能。建议从高德开放平台文档获取更多进阶功能（如路线规划、行政区划查询）。​