🍍效果
本文介绍了如何在 Vue 3 项目中集成高德地图(AMap),并使用 PoiPicker 实现地点搜索功能。 文章首先通过
AMapLoader 异步加载高德地图 API,并初始化 Map 实例。同时,借助 AMapUI 组件库引入
PoiPicker,绑定搜索输入框,实现地点选择功能。PoiPicker 监听用户的
POI(兴趣点)选择后,在地图上添加标记(Marker),并通过 InfoWindow
显示地点信息。此外,还在组件卸载时清理地图实例,防止内存泄漏。优化后的代码结构清晰,拆分了 initMap 和
loadAMapUIPoiPicker 逻辑,提高了可读性和可维护性。
🍍运行环境
@amap/amap-jsapi-loader | ^1.0.1 |