對移動端H5定位安聘，基于瀏覽器的定位，準確獲取經(jīng)緯度，計算最近距離
定位插件
image.png
選用多個定位插件出爹，最終決定使用高德地圖的插件庄吼，在頁面中引用http://webapi.amap.com/maps?v=1.4.4&key=您申請的key值 即可，然后再根據(jù)需求調(diào)用對應的函數(shù)严就，我所開發(fā)的項目使用API的是AMap.Geolocation獲取當前瀏覽器的定位总寻，AMap.CitySearch獲取當前的城市信息。
頁面結(jié)構
表單結(jié)構
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>經(jīng)銷商</span>
<select id="agency" name="agency" >
<option value="0">選擇經(jīng)銷商</option>
</select>
<em class="select-icon"></em>
</li>
處理好的省市經(jīng)銷商數(shù)據(jù)
image.png
表單數(shù)據(jù)綁定邏輯
image.png
定位函數(shù)
獲取當前瀏覽器的定位經(jīng)緯度
var D_province, D_city, D_agency;//對應的省市經(jīng)銷商
var clat, clng;//當前瀏覽器的經(jīng)緯度
var geolocation;//地理定位函數(shù)
//加載地圖梢为，調(diào)用瀏覽器定位服務
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, //定位成功后調(diào)整地圖視野范圍使定位位置及精度范圍視野內(nèi)可見，默認：false
buttonPosition: 'RB'
});
map.addControl(geolocation);
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
AMap.event.addListener(geolocation, 'error', onError); //返回定位出錯信息
});
//解析定位結(jié)果
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("瀏覽器定位失敗");
}
獲取到定位的經(jīng)緯度后粟害，獲取當前定位的省份和城市蕴忆，并且對于省份和城市進行對比，分別對省市select賦值悲幅，然后再查詢當前省市下的經(jīng)銷商列表套鹅，計算每個經(jīng)銷商距當前位置的距離，通過兩點坐標計算距離汰具，添加經(jīng)銷商的距離屬性芋哭，然后通過冒泡排序函數(shù)，對經(jīng)銷商列表基于距離由小及大排序郁副，取第一個值减牺，便是距離最近的經(jīng)銷商，然后再賦值到select,最后完場了省市定位及最近經(jīng)銷商的定位存谎。
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');
//查詢省市對應的經(jīng)銷商列表，并計算距離
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));
}
//根據(jù)距離對經(jīng)銷商排序由近及遠
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]);
//獲取最近的經(jīng)銷商
D_agency = dealerList[0].dealer_name;
$('#agency option:contains("' + D_agency + '")').attr('selected', 'true');
$('#agency').addClass('changed');
}
}
}
}
}
} else {
console.log('定位失敗');
}
})
