uniapp Map 计算实时定位到达某个具体位置距离 及 在uniappMap上绘制浮框

这个博客介绍了如何在uniapp中使用Map组件进行实时定位,并在地图上绘制浮框。通过设置浮框样式和监听定位变化,实现对用户位置的追踪。同时,博客还展示了如何计算用户到达特定位置的距离,并在达到一定距离时触发打卡提示。
摘要由CSDN通过智能技术生成

vue 部分

<template>

    <view id="patrolMap">

<map class="map" :latitude="latitude" :longitude="longitude" :markers="covers">
                    <!-- 浮框 -->
                    <cover-view class="mapTop">
                        <cover-view class="coverLeft">
                            <cover-view class="patrol-pending">搜索中</cover-view>
                            <cover-view class="patrol-time">15:32:08</cover-view>
                        </cover-view>
                        <cover-view class="coverRight"> 可疑现象 </cover-view>
                    </cover-view>

</map>

</view>

</template>

JS 部分

<script>

let interval;

export default {
    data() {
        return {
            numRice:'',//判断打卡之间距离
            interval:null,//销毁事件
            latitude: 39.753174,
            longitude: 116.34263,

             covers: [
                {
                    id: 1,
                    title: '1', // String 
                    latitude: 39.753174,
                    longitude: 116.34263,
                    iconPath: '/static/index/xld.png'
                }, {
                    id: 2,
                    title: '2', // String 
                    latitude: 39.75753,
                    longitude: 116.349005,
                    iconPath: '/static/index/xld.png'
                },
                {

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值