对移动端H5定位，基于浏览器的定位，准确获取经纬度，计算最近距离
定位插件
image.png
选用多个定位插件，最终决定使用高德地图的插件，在页面中引用http://webapi.amap.com/maps?v=1.4.4&key=您申请的key值 即可，然后再根据需求调用对应的函数，我所开发的项目使用API的是AMap.Geolocation获取当前浏览器的定位，AMap.CitySearch获取当前的城市信息。
页面结构
表单结构
image.png
<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>
处理好的省市经销商数据
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('定位失败');
}
})
网友评论