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

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

第一步： 注册高德地图（百度地图）获取key：

高德地图：https://lbs.amap.com/

百度地图：http://lbsyun.baidu.com/

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

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

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

— 页面添加地图容器

<div class="map" id="container"></div>

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

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

createMap() {
      this.$amap = new AMap.Map("container", {
        resizeEnable: true,
        center:[116.405285, 39.904989],
        zoom: 8
      });
this.geocoder = new AMap.Geocoder({
        city: "010", //城市设为北京，默认：“全国”
        radius: 1000 //范围，默认：500
      });
}

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

mounted() {
    this.createMap();
},
beforeDestory() {
    this.$amap && this.$amap.destory();
},

第三步： 给地图添加marker

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

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

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

— 1. 地图添加点击事件

this.$amap.on("click", this.showInfoClick);

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

— 2. 添加marker

addMarker(lnglats) {
      if (this.marker) {
        this.$amap.remove(this.marker);
      }
      this.marker = new AMap.Marker({
        position: lnglats,
        map: this.$amap
      });
},

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

获取经纬度：

showInfoClick(e) {
      const lnglats = [e.lnglat.getLng(), e.lnglat.getLat()];
      //国测局坐标转百度经纬度坐标
      let bd09 = coordtransform.gcj02tobd09(lnglats[0], lnglats[1]);
      let wgs84 = coordtransform.gcj02towgs84(lnglats[0], lnglats[1]);
      // 添加marker
      this.addMarker(lnglats);

      // 逆地址编码 坐标-->具体地址
      this.showAdress(lnglats, bd09, wgs84)
    } 

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

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

// 根据坐标--》获取地址
    showAdress(gcj02, bd09, wgs84) {
      const _this = this
      this.geocoder.getAddress(gcj02, function(status, result) {
        if (status === "complete" && result.regeocode) {
          var address = result.regeocode.formattedAddress;
          _this.showInfo(address, gcj02, bd09, wgs84);
        } else {
          address = "查询失败，请尝试刷新";
          // 展示marker弹出框信息
          _this.showInfo(address, gcj02, bd09, wgs84);
        }
      });
    }

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

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

// 弹出框展示

showInfo(address, lnglats, bd09, wgs84) {
    let infoWindowContent = `<div class="info-window">
                                 <span class="info-adress">${address}</span>
                                 <p>国测局坐标：${lnglats.join(",")}</p>
                                 <p>百度坐标：${bd09.join(",")}</p>
                                 <p>谷歌坐标：${wgs84.join(",")}</p>
                             </div>`;

    // 设置窗口内容
    this.infoWindow.setContent(infoWindowContent);
    // 打开窗口，在地图上**位置打开
    this.infoWindow.open(this.$amap, lnglats);
},

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

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