更新记录

1.0.0(2024-08-14) 下载此版本

  • 实现了电子围栏设置模式与监听用户模式
  • 用户出界判断
  • 用户出界用户统计呼吸警报弹框
  • 围栏设置模式支持,地点搜索功能
  • 支持点击选择围栏中心点
  • 支持自定义功能图标
  • 支持微信公众号定位配置
  • 支持微信小程序
  • 支持h5
  • 支持app

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue
钉钉小程序 快手小程序 飞书小程序 京东小程序
×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
×

使用

1.<template>

    <view class="map-box">
        <Circular-fence @commitCheck="commitCheck" :mapKey="mapKey" :Radius="Radius" :showResetting="showResetting"
        :listIco="listIco" :orientationIco="orientationIco" :resettingIco="resettingIco" :normalIco='normalIco' :circlesObj='circlesObj'
        :boundsIco='boundsIco' :configData="configData" :CoordinateList='CoordinateList' :AlarmFrame='AlarmFrame' :search='search' :radius='radius'
        :mode='mode'></Circular-fence>
    </view>

2.<script>

export default {
    data() {
        return {
            mode: '1', //模式1是监视模式2围栏设置模式
            AlarmFrame: true, //报警呼吸弹框
            radius:120,//范围圆的半径
            search: true, //搜索功能显示
            mapKey: '737965f92c797efb5447a4d658328513', //高德web服务key
            listIco: '/uni_modules/Circular-fence/static/item-inx.png', //列表图标
            orientationIco: '/uni_modules/Circular-fence/static/map-inx.png', //围栏图标
            resettingIco: '/uni_modules/Circular-fence/static/position.png', //复位当前图标
            normalIco: '/uni_modules/Circular-fence/static/normal.png', //正常用户图标
            boundsIco: '/uni_modules/Circular-fence/static/bounds.png', //警报用户图标
            showResetting: true, //复位功能显示
            circlesObj:{
                latitude: 23.02067,
                longitude:113.75179
            },
            CoordinateList: [ //监听坐标列表
                {
                    id: 1,
                    latitude: 23.020502294346436,
                    longitude: 113.75236880552961
                },
                {
                    id: 2,
                    latitude: 23.020226072772093,
                    longitude: 113.75228305657288
                },
                {
                    id: 3,
                    latitude: 23.02093635559383,
                    longitude: 113.75112544543185
                },
                {
                    id: 4,
                    latitude: 23.01900279925435,
                    longitude: 113.75039657915636
                }
            ],
            // 微信公众号jsSdk配置
            configData: {
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                appId: '', // 必填,公众号的唯一标识
                timestamp: '', // 必填,生成签名的时间戳
                nonceStr: '', // 必填,生成签名的随机串
                signature: '' // 必填,签名
            }
        };
    },
    methods: {
        commitCheck(e) {
            console.log(e, 565);
            uni.$emit('commitCheck', e);
            uni.navigateBack({
                delta: 1
            });
        }
    }
};

属性说明

属性名 类型 默认值 说明
mode String "1" 式1是监测模式2是设置围栏模式
mapKey String " " 高德Web服务Key必须传 注意小程序、h5、app都是统一,这个参数是高德【web服务】的key,用于模式2【围栏设置模式】,前提条件【search】为true,搜索功能开启
search Boolean false 【search】为true,搜索功能开启,为false是关闭搜索功能,开启搜索功能前提,模式必须是2【围栏设置模式】,【mapKey】高德Web服务Key必须有key
circlesObj Object {} 圆形围栏的中心坐标,模式为2是失效的,模式为2是必传的--实例:{latitude: 23.02067,longitude:113.75179}
radius Number 120 圆形围栏默认值,模式1和2都可以传
AlarmFrame Boolean false 是走出围栏的报警呼吸弹框--模式为1的时候才生效,,true开启, false关闭
CoordinateList Boolean false 监听的用户坐标,在模式1的时候才生效--实例:【{id: 1,latitude: 23.020502294346436,longitude: 113.75236880552961}....】
orientationIco String 默认组件图标 围栏中心图标
resettingIco String 默认组件图标 复位当前图标
listIco String 默认组件图标 搜索列表图标
normalIco String 默认组件图标 正常用户图标
boundsIco String 默认组件图标 出界用户图标
showResetting Boolean true 复位定位功能显示
configData Object {} 模式2才生效--【是微信公众号获取定位的】微信公众号jsSdk配置{debug:false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。appId:'',// 必填,公众号的唯一标识timestamp: '', // 必填,生成签名的时间戳nonceStr: '', // 必填,生成签名的随机串signature: '', // 必填,签名}

注意:

  1. mapKey的高德Web服务Key是我的个人注册测试使用的,使用次数有限,大家换成自己的

事件说明

事件名 说明 返回值
@commitCheck 选中地址的确认地址回调 data,详情见下方说明

@commitCheck 返回值 data 说明

类型 说明
latitude String 经纬度
longitude String 经纬度
radius String 围栏半径

注意:微信小程序使用

1.运行微信小程序使用--在【manifest.json】配置自己的微信小程序appid

2.在manifest.json中声明定位
             /* 小程序特有相关 */
        "mp-weixin" : {
            "appid" : "",
            "setting" : {
                "urlCheck" : false,
                "es6" : true,
                "postcss" : true,
                "minified" : true
            },
            "usingComponents" : true,
            "permission" : {
                "scope.userLocation" : {
                    "desc" : "定位"
                }
            },
            "requiredPrivateInfos" : [
                "getLocation", //使用uni.getlocation才需声明
                "startLocationUpdate", //必要
                "onLocationChange" //必要
            ]
        },
3.插件用的mapKey参数是--高德的【web服务】的key  app、h5、小程序统一用一个

注意:h5使用--格外要引入高德地图模块

1.h5使用
        必须去高德申请Web端的ksy和密钥
2.然后再【manifest.json】配置定位地图
        1.选择高德
        2.把申请的web的key配置在key那里
        3.把申请的web的秘钥配置在securityJsCode那里
        4.运行
3.注意:去[高德开发申请网站](https://console.amap.com/dev/key/app)区申请
        可以使用我的测试key配置体验--注意是测试有次数限制,尽量用自己的
        key:'6fd9d6c8b1015a6d9f9454d5df596a0f'
        code:'dc3a5f4976a6b06d3cf3ab280f672a17'
 4.插件用的mapKey参数是--高德的【web服务】的key  app、h5、小程序统一用一个
 5.很多人会遇到手机浏览器不返回定位问题,拒绝返回定位的错误,这是因为你的域名协议是http,现在必须是https才会返回位置浏览器。

注意:h5微信公众使用

1.h5微信公众使用
        必须去高德申请Web端的ksy和密钥
2.然后再【manifest.json】配置定位地图
        1.选择高德
        2.把申请的web的key配置在key那里
        3.把申请的web的秘钥配置在securityJsCode那里
        4.运行
3.注意:去[高德开发申请网站](https://console.amap.com/dev/key/app)区申请
        可以使用我的测试key配置体验--注意是测试有次数限制,尽量用自己的
        key:'6fd9d6c8b1015a6d9f9454d5df596a0f'
        code:'dc3a5f4976a6b06d3cf3ab280f672a17'
 4.插件用的mapKey参数是--高德的【web服务】的key  app、h5、小程序统一用一个
 5.在公众号后台jssdk授权域名配置好,然后把授权微信jsSdk的参数传给组件,怎么获取jsSdk配置参数[参考官方文档](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html)
 6.很多人会遇到手机浏览器不返回定位问题,拒绝返回定位的错误,这是因为你的域名协议是http,现在必须是https才会返回位置浏览器,公众号jsSDK配置参数不能为空,demo是为空自行配置自己的参数。

注意:app使用--格外要引入高德地图模块

 1.app使用必须去高德申请安卓和ios的key--你开发安卓申请安卓、开发ios申请ios

2.然后再【manifest.json】app模块配置定位和地图引入模块配置对应参数
    1.定位配置--配置系统定位、高德定位,然后配置【高德用户名】【appkey】
    2.地图配置--配置高德,然后配置【高德用户名】【appkey】

 3.注意:去[高德开发申请网站](https://console.amap.com/dev/key/app)区申请

 4.插件用的mapKey参数是--高德的【web服务】的key  app、h5、小程序统一用一个

有不懂可以

有任何疑问可以  加gougou  1-8-4-8-9-6-1-2-7-0 备注插件名称

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问