基于高德地图API的地点距离查询

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>距离计算</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script src="js/map.js"></script>
    </head>
    <body>
        <div class="container" style="margin-top: 50px;">
            <div>
                <div>起点：</div>
                <textarea placeholder="请填写" id="start"></textarea>
            </div>
            <div>
                <div>终点：</div>
                <textarea placeholder="请填写" id="end"></textarea>
            </div>
            <button class="btn btn-primary" onclick="compute)">计算距离</button>
            <div id="recommended" style="margin-top: 20px;"></div>
        </div>
        
        
        <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=053942438bf01f56a386b4e755b4161b&plugin=AMap.Geocoder"></script>
        <script type="text/javascript">
            
            
            
        </script>
    </body>
</html>

js部分

function geoCodeaddress) {
    let geocoder = new AMap.Geocoder{
        
    });
    geocoder.getLocationaddress, functionstatus, result) {
        if status === 'complete' && result.geocodes.length) {
            var lnglat = result.geocodes[0].location;
            console.log'经纬度',lnglat)
        } else {
            log.error'根据地址查询位置失败');
        }
    });
}
//根据经纬度计算距离
function computeDistanceByLnglatstartLnglat,endLnglat) {
    let p1 = startLnglat.split',');
    console.log'p1经纬度',p1);
    let p2 = endLnglat.split',');
    // var yg = AMap.GeometryUtil.distancep1, p2);
    // let km = yg / 1000).toFixed2);
    // alert"本单距离您约为" + km + "km");
    // $'#distance').text'两点之间的距离为' + yg + 'm');
}
//根据地址名称计算距离
function computeDistanceByAddressaddress,target) {
    var p1;
    var p2;
    let geocoder = new AMap.Geocoder{
        
    });
    geocoder.getLocationaddress, functionstatus, result) {
        if status === 'complete' && result.geocodes.length) {
            let lnglat = result.geocodes[0].location;
            p1 = lnglat.lng+','+lnglat.lat;
            console.log'p1',p1);
        } else {
            log.error'根据地址查询位置失败');
        }
    });
    geocoder.getLocationtarget, functionstatus, result) {
        if status === 'complete' && result.geocodes.length) {
            let lnglat = result.geocodes[0].location;
            p2 = lnglat.lng+','+lnglat.lat;
            console.log'p2',p2);
        } else {
            log.error'根据地址查询位置失败');
        }
    });
    setTimeoutfunction){
        var yg = AMap.GeometryUtil.distancep1.split','), p2.split','));
        let km = yg / 1000).toFixed2);
        console.log'【'+address+'】与【'+target+'】的距离为' + km + 'km');
        $'#recommended').text'【'+address+'】与【'+target+'】的距离为' + km + 'km');
    },2000);
}
function compute){
    let start = $'#start').val);
    let end = $'#end').val);
    console.log'计算');
    computeDistanceByAddressstart,end);
}
//店铺推荐
function storeRecommended){
    let address = $'#start').val);
    let stories = ['长沙市世茂广场L110商铺','浏阳大润发商业广场华为授权官方店','长沙市芙蓉区蔡锷中路112号','长沙市岳麓区梅溪湖西弘坤花样汇华为店1F1036号'];
    var minDistance = 9999999;
    let p1 = 1;
    let p2 = 1;
    let storeAddress;
    let geocoder = new AMap.Geocoder{
        
    });
    //获取收货地址的经纬度
    geocoder.getLocationaddress, functionstatus, result) {
        if status === 'complete' && result.geocodes.length) {
            let lnglat = result.geocodes[0].location;
            p1 = lnglat.lng+','+lnglat.lat;
            console.log'p1',p1);
        } else {
            log.error'根据地址查询位置失败');
        }
    });
    let coordinate = [];
    //获取门店地址的经纬度
    forlet i=0;i<stories.length;i++){
        geocoder.getLocationstories[i], functionstatus, result) {
            if status === 'complete' && result.geocodes.length) {
                let lnglat = result.geocodes[0].location;
                coordinate[stories[i]] = lnglat.lng+','+lnglat.lat;
            } else {
                log.error'根据地址查询位置失败');
            }
        });
    }
    setTimeoutfunction){
        forlet key in coordinate){
            console.log'----start----')
            var yg = AMap.GeometryUtil.distancep1.split','),coordinate[key].split','));
            let km = yg / 1000).toFixed2);
            console.log'km',km);
            console.log'minDistance',minDistance);
            console.log'店名',key);
            console.logkm<minDistance);
            ifkm<minDistance){
                minDistance = km;
                storeAddress = key;
            }
            console.log'更新后后',minDistance);
            console.log'----end----')
        }
    },2000)
    setTimeoutfunction){
        console.log'您离店铺【'+storeAddress+'】最近,距离'+minDistance+'KM');
        $'#recommended').text'您离店铺【'+storeAddress+'】最近,距离为' + minDistance + 'km');
    },4000)
}

效果图

本文转载自ushowtime，原文地址https://www.ushowtime.cn/blog/p/69

Published by

风君子

独自遨游何稽首 揭天掀地慰生平