微信小程序地图计算两个点之间的距离

最近在做微信小程序,需要用到计算两个标注点之间的距离,简单代码示例如下:

<template>
    <view class="content">
        <map id="maps" style=" 100%; height: 700rpx;" 
            :latitude="latitude" 
            :longitude="longitude" 
            :markers="markers" 
            :circles="circles" 
            @tap="handleClickMap">
        </map>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                current: 0,     
                latitude: 25.081037,
                longitude: 102.73249,
                markers: [{
                    latitude: 25.081037,//纬度
                    longitude: 102.73249,//经度
                }],
                circles:[{ //在地图上显示圆 ,
                    latitude: 25.081037,
                    longitude: 102.73249,
                    fillColor: "#9db0de6A", //填充颜色
                    color: "#00aaff", //描边的颜色
                    radius: 100, //半径
                    strokeWidth: 1 //描边的宽度
                }]
            }
        },
        mounted(){
            let olds = {
                latitude: 25.081037,
                longitude: 102.73249
            };
            let news = {
                latitude:25.080271,
                longitude:102.731915,
            };
            let num = 0;
            num = this.getDistance(olds.latitude,olds.longitude,news.latitude,news.longitude);
            console.log('距离:'+num);
            this.getLocation();
        },
        methods:{
            // 获取位置
            getLocation(){
                let that = this;
                uni.getLocation({
                    type:'wgs84',
                    success: (res) => {
                        const latitude = res.latitude; // 经度
                        const longitude = res.longitude; // 纬度
                        console.log(latitude,longitude);
                    },
                    fail:(res) => {
                        uni.showToast({
                            icon:'none',
                            title:'地址信息获取失败请打开GPRS权限'
                        });
                    }
                });
            },
            // 点击标注
            handleClickMap(e){
                let that = this;
                let id = e.currentTarget.id;
                let maps = uni.createMapContext('maps', this).$getAppMap();
                maps.onclick = function(point) {
                    console.log(point);                    
                    // point.iconPath = '/static/btn_loc0.png';
                    that.markers = that.markers.concat(point);                    
                    uni.showToast({
                        title: '添加成功',
                        icon: 'none'
                    });
                };
            },
            getDistance(latFrom, lngFrom, latTo, lngTo) {
                var EARTH_RADIUS = 6378136.49;
                function rad(d) {
                  return d * Math.PI / 180.0;
                }
              var radLatFrom = rad(latFrom);
              var radLatTo = rad(latTo);
              var a = radLatFrom - radLatTo;
              var b = rad(lngFrom) - rad(lngTo);
              var distance = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLatFrom) * Math.cos(radLatTo) * Math.pow(Math.sin(b / 2), 2)));
              distance = distance * EARTH_RADIUS;
              distance = Math.round(distance * 10000) / 10000;
              return parseFloat(distance.toFixed(0));
            }
        }
    }
</script>

<style>
</style>
原文地址:https://www.cnblogs.com/e0yu/p/14604383.html