腾讯地图范围打卡功能

1、先去腾讯地图申请一个key
2、引入腾讯地图

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你的key&libraries=drawing,geometry,autocomplete,convertor"></script>

image 红框画的这块这几个方法是要单独引入的，害了我用了很久的时间，一开始没看见一直报“TypeError: Cannot read property 'spherical' of undefined”，把这geometry这个方法引入就可以了。这个方法是用来计算两点距离或者面积的，具体请参考：
http://lbs.qq.com/javascript_v2/doc/spherical.html

<script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
这个也是引入的一个方法，用来定位的。

3、我们先来定自己的位置，再画出一个圆，是我们定位打卡的范围，定位的功能我参考的是这位大佬的文章https://www.jianshu.com/p/87429518c596
翠花上代码！

<template>
  <div id="container">
    <van-button class="sign" type="info" @click="openLocation">签到</van-button>
    <!-- <div id="pos-area">
      <p id="demo"></p>
    </div> -->
    <div id="map"></div>
  </div>
</template>

<script>
export default {
  name: 'sign',
  data() {
    return {
      longitude: 0, //经度
      latitude: 0, //纬度
      city: '',
    };
  },
  created() {},
  mounted() {
    this.getMyLocation();
  },
  methods: {
    //第一部分
    //定位获得当前位置信息
    getMyLocation() {
      var geolocation = new qq.maps.Geolocation('你的key', '你起的名字');
      geolocation.getLocation(this.showPosition, this.showErr, 8000);
      document.getElementById('container').scrollTop = document.getElementById('container').scrollHeight;
      //geolocation.getLocation(this.showPosition, this.showErr);//或者用getLocation精确度比较高
    },
    showPosition(position) {
      console.log(position);
      this.latitude = position.lat - 0.05022;//因为有偏差，我自己调了一点
      this.longitude = position.lng + 0.02799;//因为有偏差，我自己调了一点
      this.city = position.city;
      console.log(this.latitude, this.longitude);
      this.setMap();
    },
    showErr() {
      console.log('定位失败');
      this.getMyLocation(); //定位失败再请求定位，测试使用
    },
    //第二部分
    //位置信息在地图上展示
    setMap() {
      //步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
      //设置地图中心点
      var myLatlng = new qq.maps.LatLng(this.latitude, this.longitude);
      var center = new qq.maps.LatLng(39.9087758645997, 116.39759036591074);
      var map = new qq.maps.Map(document.getElementById('map'), {
        center: center,
        zoom: 16,
      });
      //设置圆形 参考示例：http://lbs.qq.com/javascript_v2/case-run.html#sample-overlay-circle

      new qq.maps.Circle({
        map: map,
        center: center,
        radius: 200,
        fillColor: new qq.maps.Color(20, 200, 255, 0.3),
        strokeWeight: 0,
      });
      //第三部分
      //给定位的位置添加图片标注
      var marker = new qq.maps.Marker({
        position: myLatlng,
        map: map
      });
      //给定位的位置添加文本标注
      var marker = new qq.maps.Label({
        position: myLatlng,
        map: map,
        content: '您的位置'
      });
    },
    openLocation() {
      var e = new qq.maps.LatLng(39.9087758645997, 116.39759036591074); //括号里是 目标打卡点的纬度经度
      var f = new qq.maps.LatLng(this.latitude, this.longitude); //用户当前位置的纬度经度
      var distance= parseInt(qq.maps.geometry.spherical.computeDistanceBetween(e, f))
      console.log(distance)
      if(distance>200){
        this.$toast.fail('您不在签到的范围里');
      }else{
        this.$toast.success('签到成功');
      }
    },
  },
  components: {}
};
</script>
<style scoped="scoped" lang="less">
#container {
  height: 100%;
  position: relative;
  #map,
  #pos-area {
    width: 100%;
    height: 100%;
  }
  .sign {
    position: fixed;
    bottom: 0.64rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
  }
}
</style>