vue3 使用百度地图取两个经纬度的距离（走过的坑，特来分享）

https://lbsyun.baidu.com/

先注册百度地图开放平台获取ak

阿里云有免费的ssl 证书可以去申请一下

做好了上面的准备之后看一下下面的效果图

谷歌浏览器的注意了可以换ie 查看

有bug 请看后面的注意事项

下面是代码了:

首先在vue3 目录下引入https 的百度地图链接。 ak 填写自己的百度平台ak.

 <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=*****"></script>

其次vue3代码：getMyPoint 说的是获取当前的经纬度，非常重要。我出问题的点也是在这，由于现在的安全考虑，百度地图在https域名都获取不到精确的经纬度了。 getdistancefn 方法就是用来判断经纬度之间距离的，这个方法还是很不错的没啥大问题。

    // 通过浏览器定位获得我的经纬度
    const getMyPoint = () => {
      // var self = this
      var geolocation = new BMap.Geolocation()
      geolocation.getCurrentPosition(function (res) {
        console.log(geolocation, '位置信息')
        pointA.value = new BMap.Point(res.point.lng, res.point.lat) // 通过浏览器获得我的经纬度
        console.log(pointA.value)
      })
    }
    // 测量百度地图两个点间的距离
    const getDistancefn = () => {
      var map = new BMap.Map('container')

      pointB.value = new BMap.Point(
        parseFloat('123.041951'),
        parseFloat('46.079287')
      ) // 店铺的经纬度
      map.centerAndZoom(pointB.value, 15)
      map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
      console.log(pointA.value, 'a')
      console.log(pointB.value, 'b')
      let a = (map.getDistance(pointB.value, pointA.value) / 1000).toFixed(2)
      distanceour.value = a
      return a
      //  (
      // alert(a)
      // ).toFixed(2) // 保留小数点后两位
      // console.log(a, '距离')
    }

最后在使用的时候，进行一下，pointA的值验证一下是否为空。我上面计算出来的是距离多少公里，所以对比的时候也是使用的公里来进行的。

var arr: any = Object.getOwnPropertyNames(pointA.value)
      if (arr.length == 0) {
        Dialog.confirm({
          title: '信息',
          message: '还未获取当前定位请稍等',
        })
        getMyPoint()
        return
      }

 let distance: any = getDistancefn()
      if (distance > 5) {
        Dialog.confirm({
          title: '提示',
          message: '请距离五公里在进行签到，谢谢',
        })
        getMyPoint()
        return
      }

因为定位只能定位到市，所以这个bug改了好久，如果对您起到帮助请关注我一下吧，后面还会分享精品文章。

注意事项：

1.获取精准的经纬度，需要https，没有https,先去认证ssl

2.ie浏览器很精准，谷歌浏览器，获取不到精准定位，只能定位到市。

3.我当时做的时候是在微信内部浏览器，在电脑上的威信内置获取不到，手机端没问题

4.认证了https 后需要等一段时间手机上才能获取到不要心急。