基于百度地图的h5的精准定位，并实现计算距离、生成轨迹【vue】【百度地图】【精准定位】【打卡】

0、实现的功能

基于百度地图api的h5的精准定位，不依赖平台api

计算两点之间的距离，实现业务需求（例如：打卡）

生成两点之间轨迹

1、官网地址

jspopularGL | 百度地图API SDK (baidu.com)

2、在index.html引入依赖

注：webgl是用来做轨迹的

  <script src="https://api.map.baidu.com/api?v=3.0&ak=你的ak"></script>
  <script type="text/javascript"
  src="//api.map.baidu.com/getscript?v=1.0&type=webgl&ak=你的ak"></script>

3、预览

4、代码

<template>
    <div>
        <van-button type="primary" @click="baiduMapLocate">定位当前位置</van-button>
        <van-button type="primary" @click="getPointsDistance">计算你到默认地点的距离</van-button>
        <van-button type="primary" @click="initMap">生成两点之间的轨迹</van-button>
        <div>两点之间的轨迹</div>
        <div id="container" style="width: 100%;height: 300px;"></div>
        <div>百度地图定位当前位置</div>
        <div id="allmap" style="width: 100%;height: 300px;background-color: aquamarine;"></div>
    </div>
</template>

<script>
import { ref, defineComponent, reactive, toRefs, inject, onMounted } from "vue";
export default defineComponent({
    name: 'viewReader',
    setup() {
        const data = reactive({
            // 当前经纬度
            curLngLat: {
                latitude: '',
                longitude: ''
            },
            // 默认终点的经纬度
            defaultTargerLngLat: {
                latitude: 24.980251105448456,
                longitude: 123.73735883387097
            },
        });
        // navigator定位不准确，废弃
        // const getLongitudeLatitude = () => {
        //     //如果该对象存在，那么地理位置服务可用。
        //     if ('geolocation' in navigator) {
        //         /* 地理位置服务可用 */
        //         var options = {
        //             enableHighAccuracy: true, //布尔值，表示系统是否使用最高精度来表示结果，注意，这会导致较慢的响应时间或者增加电量消耗（比如对于支持gps的移动设备来说）。如果值为false ，设备会通过更快响应以及/或者使用更少的电量等方法来尽可能的节约资源。默认值fasle
        //             timeout: 5000, //它表明的是设备必须在多长时间（单位毫秒）内返回一个位置。默认直到获取到位置才会返回值。
        //             maximumAge: 0 //表明可以返回多长时间（即最长年龄，单位毫秒）内的可获取的缓存位置。如果设置为 0, 说明设备不能使用一个缓存位置，而且必须去获取一个真实的当前位置。默认0
        //         }

        //         const success = function (position) {
        //             data.curLngLat.latitude = position.coords.latitude //当前位置的纬度
        //             data.curLngLat.longitude = position.coords.longitude //当前位置经度
        //             console.log('用户当前经纬度', data.curLngLat, position);
        //             // alert(`当前位置的纬度:${latitude} 当前位置经度:${longitude}`)
        //         }
        //         const error = function (err) {
        //             var errorType = ['您拒绝共享位置信息,请去app设置一下！', '获取不到位置信息', '获取位置信息超时']
        //             alert(errorType[err.code - 1])
        //             console.log(errorType[err.code - 1])
        //         }
        //         navigator.geolocation.getCurrentPosition(success, error, options)
        //     } else {
        //         /* 地理位置服务不可用 */
        //         console.log('无法获取您的位置，请检查定位是否开启或刷新重试')
        //     }
        // }
        /**
        * 计算两点之间距离
        * @param latlng1 点1 {latitude:'',longitude:''}
        * @param latlng2 点2 {latitude:'',longitude:''}
        * @returns {number} 返回数字单位为m
        */
        const getDistance = (latlng1, latlng2) => {
            let { latitude: lat1, longitude: lng1 } = latlng1;
            let { latitude: lat2, longitude: lng2 } = latlng2;

            let a = Math.PI / 180;
            let s = Math.acos(Math.cos(lat1 * a) * Math.cos(lat2 * a) * Math.cos(lng1 * a - lng2 * a) + Math.sin(lat1 * a) * Math.sin(lat2 * a))
            s = s * 6378.137 // EARTH_RADIUS;
            s = Math.round(s * 10000) / 10000 * 1000;
            return s;
        }
        const getPointsDistance = () => {
            const distance = getDistance(data.curLngLat, data.defaultTargerLngLat)
            console.log('distance: ' + distance);
            alert('distance: ' + distance);
        }
        const initMap = () => {
            var map = new BMapGL.Map("container");
            map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);

            var p1 = new BMapGL.Point(data.curLngLat.longitude, data.curLngLat.latitude);
            var p2 = new BMapGL.Point(data.defaultTargerLngLat.longitude, data.defaultTargerLngLat.latitude);

            var driving = new BMapGL.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true } });
            driving.search(p1, p2);
        }
        const baiduMapLocate = () => {
            var map = new BMap.Map("allmap");
            var point = new BMap.Point(116.404, 39.915);
            map.centerAndZoom(point, 12);

            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function (r) {
                console.log(r.point)
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    var mk = new BMap.Marker(r.point);
                    map.addOverlay(mk);//标出所在地
                    map.panTo(r.point);//地图中心移动
                    //alert('您的位置：'+r.point.lng+','+r.point.lat);
                    data.curLngLat.latitude = r.point.lat
                    data.curLngLat.longitude = r.point.lng
                    var point = new BMap.Point(r.point.lng, r.point.lat);//用所定位的经纬度查找所在地省市街道等信息
                    var gc = new BMap.Geocoder();
                    gc.getLocation(point, function (rs) {
                        var addComp = rs.addressComponents; console.log(rs.address);//地址信息
                        alert(rs.address);//弹出所在地址
                    });
                } else {
                    alert('failed' + this.getStatus());
                }
            }, { enableHighAccuracy: true })
        }
        return {
            getPointsDistance,
            initMap,
            baiduMapLocate,
            ...toRefs(data)
        };
    }
});
</script>