使用uniapp写圆形的电子围栏，判断自己标的点是否在画的圆圈里面。

最新推荐文章于 2024-08-27 00:30:00 发布

新手先模仿

最新推荐文章于 2024-08-27 00:30:00 发布

阅读量656

点赞数 2

文章标签： uni-app javascript 前端

本文链接：https://blog.csdn.net/m0_57209996/article/details/131891093

版权

<template>
  <view>
    <map style="width: 100%;height: 500px;" :longitude="longitude" :latitude="latitude" :markers="markers" :circles="circles" @updated="checkInFence"></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      longitude: 115.900159, // 当前位置经度（请替换为您实际的经度）
      latitude: 28.689578, // 当前位置纬度（请替换为您实际的纬度）
      fenceLongitude: 115.900159, // 电子围栏中心经度（请替换为您实际需要的经度）
      fenceLatitude: 28.689578, // 电子围栏中心纬度（请替换为您实际需要的纬度）
      fenceRadius: 100, // 电子围栏半径（单位：米）
      markers: [], // 地图上的标记点
      circles: [], // 地图上的圆形围栏
    };
  },
  mounted() {
    this.createFence();
  },
  methods: {
    // 创建电子围栏
    createFence() {
      this.markers.push({
        id: 1,
        longitude: this.fenceLongitude,
        latitude: this.fenceLatitude,
        title: '电子围栏中心'
      });
      this.circles.push({
        longitude: this.fenceLongitude,
        latitude: this.fenceLatitude,
        radius: this.fenceRadius,
        color: '#FF0000',
        fillColor: 'rgba(255, 0, 0, 0.2)'
      });
    },
    // 判断当前位置是否在电子围栏内
    checkInFence(e) {
		console.log(123,e);
      const { longitude, latitude } = e.detail;
		
      const distance = this.getDistance(this.fenceLongitude, this.fenceLatitude, 115.900159, 28.689578);//现在写的是标记的点和圆点一致
	  console.log(distance,this.fenceRadius,444444);
      if (distance <= this.fenceRadius) {
		  console.log('已越过危险区域');
        uni.showToast({
          title: '已越过危险区域',
          icon: 'none'
        });
      }
    },
    // 计算两点间的距离
    getDistance(lng1, lat1, lng2, lat2) {
		console.log(lng1, lat1, lng2, lat2,'lng1, lat1, lng2, lat2');
      const rad = Math.PI / 180.0;
      const latDiff = lat1 - lat2;
      const lngDiff = lng1 - lng2;
      const distance = Math.sqrt(Math.pow(latDiff * 111000, 2) + Math.pow(lngDiff * 111000 * Math.cos(lat1 * rad), 2));
	  console.log(distance,'distance');
      return distance;
    },
  },
};
</script>

使用map需要一些准备工作，需要自行百度