高德地图定位并匹配距离最近经销商
2018-03-12 17:04
507 查看
对移动端H5定位,基于浏览器的定位,准确获取经纬度,计算最近距离
选用多个定位插件,最终决定使用高德地图的插件,在页面中引用http://webapi.amap.com/maps?v=1.4.4&key=您申请的key值 即可,然后再根据需求调用对应的函数,我所开发的项目使用API的是AMap.Geolocation获取当前浏览器的定位,AMap.CitySearch获取当前的城市信息。
处理好的省市经销商数据
表单数据绑定逻辑
获取到定位的经纬度后,获取当前定位的省份和城市,并且对于省份和城市进行对比,分别对省市select赋值,然后再查询当前省市下的经销商列表,计算每个经销商距当前位置的距离,通过两点坐标计算距离,添加经销商的距离属性,然后通过冒泡排序函数,对经销商列表基于距离由小及大排序,取第一个值,便是距离最近的经销商,然后再赋值到select,最后完场了省市定位及最近经销商的定位。
源码 https://github.com/Aimee1608/dwDemo
定位插件
选用多个定位插件,最终决定使用高德地图的插件,在页面中引用http://webapi.amap.com/maps?v=1.4.4&key=您申请的key值 即可,然后再根据需求调用对应的函数,我所开发的项目使用API的是AMap.Geolocation获取当前浏览器的定位,AMap.CitySearch获取当前的城市信息。
页面结构
表单结构<li class="province-city"> <select id="ddlProvince" name="ddlProvince" class="ddlProvince" title="省/00" > <option value="0">选择省份</option> </select> <em class="select-icon select-province"></em> <select id="ddlCity" name="ddlCity" class="ddlCity"> <option value="0">选择城市</option> </select> <em class="select-icon"></em> </li> <li> <span>经销商</span> <select id="agency" name="agency" > <option value="0">选择经销商</option> </select> <em class="select-icon"></em> </li>
处理好的省市经销商数据
表单数据绑定逻辑
定位函数
获取当前浏览器的定位经纬度var D_province, D_city, D_agency;//对应的省市经销商 var clat, clng;//当前浏览器的经纬度 var geolocation;//地理定位函数 //加载地图,调用浏览器定位服务 var map = new AMap.Map('container', { resizeEnable: true }); map.plugin('AMap.Geolocation', function () { geolocation = new AMap.Geolocation({ enableHighAccuracy: true,//是否使用高精度定位,默认:true timeout: 10000, //超过10秒后停止定位,默认:无穷大 buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20) zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false buttonPosition: 'RB' }); map.addControl(geolocation); geolocation.getCurrentPosition(); AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息 AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息 }); //解析定位结果 function onComplete(data) { clat = data.position.getLat(); clng = data.position.getLng(); console.log(data); //alert("浏览器定位成功"); } //解析定位错误信息 function onError(data) { clat = 39.95751; clng = 116.33762; //alert("浏览器定位失败"); }
获取到定位的经纬度后,获取当前定位的省份和城市,并且对于省份和城市进行对比,分别对省市select赋值,然后再查询当前省市下的经销商列表,计算每个经销商距当前位置的距离,通过两点坐标计算距离,添加经销商的距离属性,然后通过冒泡排序函数,对经销商列表基于距离由小及大排序,取第一个值,便是距离最近的经销商,然后再赋值到select,最后完场了省市定位及最近经销商的定位。
var citysearch = new AMap.CitySearch(); //自动获取用户IP,返回当前城市 citysearch.getLocalCity(function (status, result) { if (status === 'complete' && result.info === 'OK') { if (result && result.city && result.bounds) { console.log(result.city, result.province, result.bounds, result); //result.city = "武汉市"; //result.province = "湖北省"; if (result.city == result.province) {//北京市等四大直辖市 D_province = result.city.substr(0, 2); D_city = result.city; } else {//其他的省市 D_province = result.province.substring(0, result.province.length - 1); D_city = result.city.substring(0, result.province.length - 1); } //对应的省市自动获取 $('#ddlProvince option:contains("' + D_province + '")').attr('selected', 'true'); $('#ddlProvince').addClass('changed'); ProvinceData.BindCity('ddlProvince', 'ddlCity'); $('#ddlCity option:contains("' + D_city + '")').attr('selected', 'true'); $('#ddlCity').addClass('changed'); ProvinceData.BindAgency('ddlProvince', 'ddlCity', 'agency'); //查询省市对应的经销商列表,并计算距离 for (var i = 0; i < Dealer.length; i++) { if (Dealer[i].dealer_name == D_province) { var cityList = Dealer[i].city; //console.log(cityList) for (var n = 0; n < cityList.length; n++) { if (cityList .dealer_name == D_city) { var dealerList = cityList .dealer; //计算两个坐标点之间的距离 for (var m = 0; m < dealerList.length; m++) { dealerList[m].distance = Math.sqrt(Math.pow(dealerList[m].dealer_lat - clat, 2) + Math.pow(dealerList[m].dealer_lng - clng, 2)); } //根据距离对经销商排序由近及远 function compare(property) { return function (a, b) { var value1 = a[property]; var value2 = b[property]; return value1 - value2; } } console.log(dealerList.sort(compare('distance')), dealerList[0]); //获取最近的经销商 D_agency = dealerList[0].dealer_name; $('#agency option:contains("' + D_agency + '")').attr('selected', 'true'); $('#agency').addClass('changed'); } } } } } } else { console.log('定位失败'); } })
源码 https://github.com/Aimee1608/dwDemo
相关文章推荐
- 最近在SPARK上定位的几个内存泄露问题总结
- Android调用高德地图定位的方法
- 高德地图无法定位
- Android 高德地图集成 地图展示+定位+路线规划+各种原有图标的隐藏处理
- 百练+最近邻点对+递归分治法的运用+计算在左右两边的点距离部分最精彩
- 最长匹配原则和管理距离优先级比较
- hdoj 4741 异面直线求最近距离及最近点
- Android开发实现高德地图定位详解
- 求三维空间中距离最近的两点
- 倒角距离匹配
- 高德地图定位源码
- JQuery 左右移动菜单(精准定位移动距离)
- 最近距离 已知平面上的若干点的位置,存入一个List中。现在需要计算所有这些点中,距离最近的两个点间的最小距离。
- 距离眼镜最近的显示器
- 可输入及自动定位(自动匹配)的下拉列表
- Swift - 使用CoreLocation实现定位(经纬度、海拔、速度、距离等)
- Android 利用高德地图API进行定位、开发电子围栏、天气预报、轨迹记录、搜索周边(位置)
- hdu 1007 /ZOJ 2107 Quoit Design (二分,最近点距离)
- 素数距离问题 时间限制:3000 ms | 内存限制:65535 KB 难度:2 描述 现在给出你一些数,要求你写出一个程序,输出这些整数相邻最近的素数,并输出其相距长度。如果左右有等距离长度素数
- 利用高德地图和腾讯地图的详细地址定位