基于高德地图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) }
效果图
本文转载自ushowtime，原文地址https://www.ushowtime.cn/blog/p/69
