高德地图定位并匹配距离最近经销商

对移动端H5定位，基于浏览器的定位，准确获取经纬度，计算最近距离

定位插件

image.png

选用多个定位插件，最终决定使用高德地图的插件，在页面中引用http://webapi.amap.com/maps?v=1.4.4&key=您申请的key值 即可，然后再根据需求调用对应的函数，我所开发的项目使用API的是AMap.Geolocation获取当前浏览器的定位，AMap.CitySearch获取当前的城市信息。

页面结构

---

表单结构

image.png

            
                选择省份
            
            
            
                选择城市
            
            
        
        

            经销商

   选择经销商

            
  
       

处理好的省市经销商数据

image.png

表单数据绑定逻辑

image.png

定位函数

获取当前浏览器的定位经纬度

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[n].dealer_name == D_city) {
                            var dealerList = cityList[n].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