当前位置：首页 > news >正文

uni-app 引入高德地图

news 2025/5/23 4:35:02

一、准备工作：申请密钥与环境配置

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

取消自动换行复制

<view>

</view>

</template>

2. 初始化高德地图

TypeScript

取消自动换行复制

// 引入高德地图加载器（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

取消自动换行复制

<view>

<button @click="searchStore">搜索附近门店</button>

</view>

</template>

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: '全国'扩大搜索范围