H5页面高德定位打卡功能

夏目和友人
1,273 阅读1分钟

首先注册账号并申请Key

  1. 首先，注册开发者账号，成为高德开放平台开发者

  2. 登陆之后，在进入「应用管理」 页面「创建新应用」

  3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

申请key

进入官网

捕获12333.PNG

注册账号

捕获231341.PNG

应用管理

捕获2313.PNG

新建应用

捕获31414.PNG

添加key

捕获123331.PNG

选择web端 （JS API）

捕获424252.PNG

获取KEY

捕获111333.PNG

准备页面

  1. 在页面添加 JS API 的入口脚本标签，并将其中「您申请的key值」替换为您刚刚申请的 key；
 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>
  1. 添加 div 标签作为地图容器，同时为该 div 指定 id 属性；
<div id="container"></div>
  1. 为地图容器指定高度、宽度；
#container {width:300px; height: 180px; }
  1. 进行移动端开发时，请在 head 内添加 viewport 设置，以达到最佳的绘制性能；
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  1. 在完成如上准备工作之后便可以开始进行开发工作了。

结构代码

<template>
  <div class="main">
    <div id="container"></div>
    <div class="info" @click="handleClick">打卡</div>
  </div>
</template>
<script>

逻辑代码

export default {
  data() {
    return {
      signzone: [118.795257, 32.06046],
      distance: 0,
      point: [],
      distanceArr: [],
      arr: [
        {
          lat: 32.06046,
          lng: 118.795257,
          r: 300,
        },
        {
          lat: 32.061792,
          lng: 118.783514,
          r: 200,
        },
        {
          lat: 32.06361,
          lng: 118.791325,
          r: 150,
        },
      ],
    };
  },
  created() {},
  computed: {},
  mounted() {
    this.qwe(this.arr);
  },
  methods: {
    // 定位
    qwe(arr) {
      let that = this;
      var map = new AMap.Map("container", {
        resizeEnable: true,
      });
      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认:true
          timeout: 10000, // 超过10秒后停止定位，默认：无穷大
          maximumAge: 60 * 24 * 60 * 60 * 1000, // 定位结果缓存0毫秒，默认：0
          convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
          showButton: true, // 显示定位按钮，默认：true
          buttonPosition: "LB", // 定位按钮停靠位置，默认：'LB'，左下角
          buttonOffset: new AMap.Pixel(20, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
          showCircle: false, // 定位成功后用圆圈表示定位精度范围，默认：true
          panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
          zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function (status, result) {
          if (status == "complete") {
            that.onComplete(result);
          } else {
            that.onError(result);
          }
        });
        arr.forEach((item) => {
          let circle = new AMap.Circle({
            center: [item.lng, item.lat],
            radius: item.r, //签到范围半径
            borderWeight: 1,
            strokeOpacity: 1,
            strokeOpacity: 0.2,
            fillOpacity: 0.4,
          });
          circle.setMap(map);
          map.setFitView([circle]);
        });

        map.plugin(["AMap.CircleEditor"], function () {
          circleEditor = new AMap.CircleEditor(map, circle);
          circleEditor.open();
        });
      });
    },
    //解析定位结果
    onComplete(data) {
      console.log(data, "定位");
      this.point = [];
      var str = [];
      this.point.push(data.position.lng);
      this.point.push(data.position.lat);
      console.log(data.position);
      str.push("定位结果：" + data.position);
      str.push("定位类别：" + data.location_type);
      if (data.accuracy) {
        str.push("精度：" + data.accuracy + " 米");
      } //如为IP精确定位结果则没有精度信息
      str.push("是否经过偏移：" + (data.isConverted ? "是" : "否"));
      console.log(str);
    //   alert("定位成功" + str);
    },
    //解析定位错误信息
    onError(data) {
      console.log("定位失败");
      console.log(data.message);
    //   alert("定位失败" + data.message);
    },
    handleClick() {
      this.distanceArr = [];
      this.arr.forEach((item, i) => {
        let distance = AMap.GeometryUtil.distance(this.point, [
          item.lng,
          item.lat,
        ]).toFixed(2);
        this.distanceArr.push(distance);
      });
      let flge = this.arr.some((item, index) => {
        return this.distanceArr[index] <= item.r;
      });

      if (flge) {
        this.$message({
          message: "打卡成功！",
          type: "success",
        });
      } else {
        this.$message({
          message: "不在考勤范围内！",
          type: "warning",
        });
      }
      console.log(this.distanceArr, "this.distanceArr");
    },
  },
};
</script>

完整代码

<template>
  <div class="main">
    <div id="container"></div>
    <div class="info" @click="handleClick">打卡</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      signzone: [118.795257, 32.06046],
      distance: 0,
      point: [],
      distanceArr: [],
      arr: [
        {
          lat: 32.06046,
          lng: 118.795257,
          r: 300,
        },
        {
          lat: 32.061792,
          lng: 118.783514,
          r: 200,
        },
        {
          lat: 32.06361,
          lng: 118.791325,
          r: 150,
        },
      ],
    };
  },
  created() {},
  computed: {},
  mounted() {
    this.qwe(this.arr);
  },
  methods: {
    // 定位
    qwe(arr) {
      let that = this;
      var map = new AMap.Map("container", {
        resizeEnable: true,
      });
      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认:true
          timeout: 10000, // 超过10秒后停止定位，默认：无穷大
          maximumAge: 60 * 24 * 60 * 60 * 1000, // 定位结果缓存0毫秒，默认：0
          convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
          showButton: true, // 显示定位按钮，默认：true
          buttonPosition: "LB", // 定位按钮停靠位置，默认：'LB'，左下角
          buttonOffset: new AMap.Pixel(20, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
          showCircle: false, // 定位成功后用圆圈表示定位精度范围，默认：true
          panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
          zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function (status, result) {
          if (status == "complete") {
            that.onComplete(result);
          } else {
            that.onError(result);
          }
        });
        arr.forEach((item) => {
          let circle = new AMap.Circle({
            center: [item.lng, item.lat],
            radius: item.r, //签到范围半径
            borderWeight: 1,
            strokeOpacity: 1,
            strokeOpacity: 0.2,
            fillOpacity: 0.4,
          });
          circle.setMap(map);
          map.setFitView([circle]);
        });

        map.plugin(["AMap.CircleEditor"], function () {
          circleEditor = new AMap.CircleEditor(map, circle);
          circleEditor.open();
        });
      });
    },
    //解析定位结果
    onComplete(data) {
      console.log(data, "定位");
      this.point = [];
      var str = [];
      this.point.push(data.position.lng);
      this.point.push(data.position.lat);
      console.log(data.position);
      str.push("定位结果：" + data.position);
      str.push("定位类别：" + data.location_type);
      if (data.accuracy) {
        str.push("精度：" + data.accuracy + " 米");
      } //如为IP精确定位结果则没有精度信息
      str.push("是否经过偏移：" + (data.isConverted ? "是" : "否"));
      console.log(str);
    //   alert("定位成功" + str);
    },
    //解析定位错误信息
    onError(data) {
      console.log("定位失败");
      console.log(data.message);
    //   alert("定位失败" + data.message);
    },
    handleClick() {
      this.distanceArr = [];
      this.arr.forEach((item, i) => {
        let distance = AMap.GeometryUtil.distance(this.point, [
          item.lng,
          item.lat,
        ]).toFixed(2);
        this.distanceArr.push(distance);
      });
      let flge = this.arr.some((item, index) => {
        return this.distanceArr[index] <= item.r;
      });

      if (flge) {
        this.$message({
          message: "打卡成功！",
          type: "success",
        });
      } else {
        this.$message({
          message: "不在考勤范围内！",
          type: "warning",
        });
      }
      console.log(this.distanceArr, "this.distanceArr");
    },
  },
};
</script>
<style lang="less" scoped>
.main {
  position: relative;
  .info {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    background-color: rgb(226, 50, 6, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: aliceblue;
    z-index: 999;
  }
}

#container {
  width: 100vw;
  height: 100vh;
  z-index: 9;
}
</style>

页面效果

213.PNG

2342.PNG

avatar
文章
阅读
粉丝