基于高德地图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 geoCode(address) {
    let geocoder = new AMap.Geocoder({
        
    });
    geocoder.getLocation(address, function(status, result) {
        if (status === 'complete' && result.geocodes.length) {
            var lnglat = result.geocodes[0].location;
            console.log('经纬度',lnglat)
        } else {
            log.error('根据地址查询位置失败');
        }
    });
}
//根据经纬度计算距离
function computeDistanceByLnglat(startLnglat,endLnglat) {
    let p1 = startLnglat.split(',');
    console.log('p1经纬度',p1);
    let p2 = endLnglat.split(',');
    // var yg = AMap.GeometryUtil.distance(p1, p2);
    // let km = (yg / 1000).toFixed(2);
    // alert("本单距离您约为" + km + "km");
    // $('#distance').text('两点之间的距离为' + yg + 'm');
}
//根据地址名称计算距离
function computeDistanceByAddress(address,target) {
    var p1;
    var p2;
    let geocoder = new AMap.Geocoder({
        
    });
    geocoder.getLocation(address, function(status, 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.getLocation(target, function(status, 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('根据地址查询位置失败');
        }
    });
    setTimeout(function(){
        var yg = AMap.GeometryUtil.distance(p1.split(','), p2.split(','));
        let km = (yg / 1000).toFixed(2);
        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('计算');
    computeDistanceByAddress(start,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.getLocation(address, function(status, 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 = [];
    //获取门店地址的经纬度
    for(let i=0;i<stories.length;i++){
        geocoder.getLocation(stories[i], function(status, result) {
            if (status === 'complete' && result.geocodes.length) {
                let lnglat = result.geocodes[0].location;
                coordinate[stories[i]] = lnglat.lng+','+lnglat.lat;
            } else {
                log.error('根据地址查询位置失败');
            }
        });
    }
    setTimeout(function(){
        for(let key in coordinate){
            console.log('----start----')
            var yg = AMap.GeometryUtil.distance(p1.split(','),coordinate[key].split(','));
            let km = (yg / 1000).toFixed(2);
            console.log('km',km);
            console.log('minDistance',minDistance);
            console.log('店名',key);
            console.log(km<minDistance);
            if(km<minDistance){
                minDistance = km;
                storeAddress = key;
            }
            console.log('更新后后',minDistance);
            console.log('----end----')
        }
    },2000)
    setTimeout(function(){
        console.log('您离店铺【'+storeAddress+'】最近,距离'+minDistance+'KM');
        $('#recommended').text('您离店铺【'+storeAddress+'】最近,距离为' + minDistance + 'km');
    },4000)
}