Vue2 - 详细实现安装引入高德地图并查询展示周边交通/教育/医疗/商场/生活/娱乐等POI类型，获取当前定位位置或指定地点附近的医院/学校/购物/景点等商圈类目，在地图上展示位置列表并地图标记点！

前言

Vue3 版本，请访问 这篇文章。

在 vue2 | nuxt2 项目开发中，详解高德地图根据当前定位获取周边附近的商圈，vue2高德地图获取周边商圈并将这些地址位置列出来供用户点击跳转和选择，获取当前位置或指定区域周边的交通出行、学校教育、医院诊所、商场购物、生活娱乐、旅游景点、酒店民宿、充电/加油站等各种分类类目，将拿到的周边地址名称、详细地址、距离当前定位的距离数据进行列表渲染展示+地图上图片标记和点击标记联动效果，自定义任意样式和交互。

提供详细示例代码，新手小白复制运行即可。

---

如下图所示，手机H5移动端或电脑PC端都可以用，展示附近各种商圈地址展示及操作。

详细示例代码，保证100%搞定。

申请高德地图 KEY

您要想使用高德地图，就必须先申请 key。