vue 获取用户位置 高德_JS vue下 实现高德地图定位，获取当前经纬度，添加marker...

JS vue下实现高德地图定位，获取当前经纬度，添加marker

网上关于web端调用高德地图定位，百度地图定位等等之类的资料比较少，也不完整， 在使用的时候最好的资料莫过于官网的文档了，也是逼着我自己学会了看文档了，在这期间真的踩坑无数， 跳坑爽歪歪… … ，下面更新一片如何利用JS高德地图实现地图定位，获取当前经纬度，地图添加marker。

第一步： 注册高德地图(百度地图)获取key：

具体获取key的步骤可以查看我的另外一篇文章记录了：nuxt项目使用高德地图教程

第二步：网页中初始化地图(这里采用的高德地图)：

ps： 我是在vue的项目中使用，下面的代码也是vue项目的操作流程

— 页面添加地图容器

坑1： 如果地图没有现实出来，先给容器一个固定的宽高值试试，有时候是css的问题

— 初始化地图，设置中心点(center)，地图赋值给this.$amap,方便后续操作地图时使用

–调用createMap方法，这里需要注意的是在组件销毁beforeDestory的时候一定要销毁地图

第三步： 给地图添加marker

需求：点击地图，显示所点击的位置marker，展示所点击地址的详情

思路：1. 点击地图–>2. 添加marker点 –> 3. 获取定位地址信息 –> 4. 自定义添加marker信息–> ok

拿到一个需求我们不要着急去做， 先去梳理思路，需求然后在一步步的实现，我们结合高德地图的webJS开发文档来实现吧

— 1. 地图添加点击事件

这里的this.showInfoClick是当地图点击的时候触发的事件， 在初始化地图的createMap() 方法里面添加点击事件

— 2. 添加marker

我们在地图上添加marker的时候需要传入所点击的经纬度，即参数：lngtats， 我们新增marker的时候先移除地图上已有的。

获取经纬度：

还记得我们在设置地图点击事件里面出发了这个showInfoClick 方法，高德地图API里面就有这个参数了， 帮助我们获取经纬度的。

— 3.根据经纬度获取坐标地址信息

这里我们不用关注坐标转换的代码， 这里的 address就是坐标对应的地址详情了。

— 4.自定义展示marker详情信息

// 弹出框展示

showInfo(address, lnglats, bd09, wgs84) {

let infoWindowContent = `

${address}

国测局坐标：${lnglats.join(",")}

百度坐标：${bd09.join(",")}

谷歌坐标：${wgs84.join(",")}

`;

// 设置窗口内容

this.infoWindow.setContent(infoWindowContent);

// 打开窗口，在地图上**位置打开

this.infoWindow.open(this.$amap, lnglats);

},

完成如上操作就实现了我们在地图上点击添加marker点， 同时展示坐标详情的功能了。

注： 本代码是自己vue项目的代码， 有看不懂或者错误的地方可以单独找我哦。