uni-app 使用 vue-baidu-map 模块实现指定区域内打卡

vue-baidu-map

第三方组件是对基于百度地图 JS API 开发的开源库的封装。

官方文档：https://dafrok.github.io/vue-baidu-map/#/zh/start/installation

• 组件引入使用

<template>
  <div class="baidu-container">
    <baidu-map class="map" ak="百度地图开发平台AK" :center="center" :zoom="zoom" @ready="handler"
      :scroll-wheel-zoom="true">
    </baidu-map>
  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

export default {
  components: {
    BaiduMap
  },
  data() {
    return {
      center: {
        lng: 0,
        lat: 0,
      },
      zoom: 15
    }
  },
  methods: {
    handler({
      BMap,
      map
    }) {
      this.center.lng = 116.404
      this.center.lat = 39.915
    }
  }
}
</script>

<style lang="less">
.baidu-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  ::v-deep .anchorBL {
    display: none !important;
  }

  .map {
    width: 750rpx;
    /* #ifdef H5 */
    width: 100%;
    /* #endif */
    height: 300px;
    background-color: #f0f0f0;
  }
}
</style>

百度地图开发平台申请：https://lbsyun.baidu.com

• 新增地图放大缩小标尺

<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>

import {
 BmNavigation
 } from 'vue-baidu-map'

• 新增地图定位到当前按钮操作

<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true">
</bm-geolocation>

import { BmGeolocation } from 'vue-baidu-map'

• 绘制可打卡区域

<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true">
</bm-geolocation>

import { BmCircle } from 'vue-baidu-map'

export default {
  components: {
    BmCircle
  },
  data() {
    return {
      circlePath: {
        center: {
          lng: 116.404,
          lat: 39.915
        },
        radius: 500
      }
    }
  },
  methods: {
    updateCirclePath(e) {
      this.circlePath.center = e.target.getCenter()
      this.circlePath.radius = e.target.getRadius()
    }
  }
}

到此，地图及期绘制方面的算是完成了。

• uni-app api 获取当前位置

uni.getLocation({
  type: 'gcj02'
}).then(res => {
  return res
})

注意：gcj02，国内地图一定要使用这个，不然误差很大。

GCJ-02是由中国国家测绘局（G表示Guojia国家，C表示Cehui测绘，J表示Ju局）制订的地理信息系统的坐标系统。

更多可查看百度百科：https://baike.baidu.com/item/GCJ-02/1913612?fr=ge_ala

• 最后计算两点之间的距离是否在半经内“radius: 500”

// 计算距离
distanceOfTwoPoint(lat1, lng1, lat2, lng2) {
  const radLat1 = lat1 * Math.PI / 180.0
  const radLat2 = lat2 * Math.PI / 180.0
  const a = radLat1 - radLat2
  const b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0
  let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)))
  s = s * 6378.137
  s = Math.round(s * 1000)

  return s
},