<!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