zoukankan      html  css  js  c++  java
  • 微信小程序地图计算两个点之间的距离

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

    <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>
  • 相关阅读:
    最短Hamilton路径-状压dp解法
    泡芙
    斗地主
    楼间跳跃
    联合权值
    虫食算
    抢掠计划
    间谍网络
    城堡the castle
    【模板】缩点
  • 原文地址:https://www.cnblogs.com/e0yu/p/14604383.html
Copyright © 2011-2022 走看看