網(wǎng)上商城在開發(fā)附近店鋪或者定位的時(shí)候，LBS功能是必不可少的，今天我們來(lái)講述，開發(fā)網(wǎng)上商城過程中，如何接入LBS，實(shí)現(xiàn)查找附近商家的功能。
開發(fā)這個(gè)功能的主要實(shí)現(xiàn)的思路是：使用當(dāng)前LBS獲取到的經(jīng)緯度，和數(shù)據(jù)庫(kù)中查看商家表的每條記錄的經(jīng)緯度，計(jì)算兩個(gè)經(jīng)緯度之間的距離，在某個(gè)范圍內(nèi)的則是附近商家。
接著我們?cè)O(shè)計(jì)數(shù)據(jù)庫(kù)表，需要記錄經(jīng)度緯度這2字段：
附近商家可以在后臺(tái)新增、編輯店鋪時(shí)可以根據(jù)騰訊地圖接口保存店鋪的經(jīng)緯度，效果如下圖：
需要引入JS：<script charset="utf-8" src="{:WSTProtocol()}map.qq.com/api/js?v=2.exp&key={:WSTConf('CONF.mapKey')}"></script>
{:WSTProtocol()}為網(wǎng)址協(xié)議，例如http或https
{:WSTConf('CONF.mapKey')}為騰訊地圖申請(qǐng)的key
相關(guān)html代碼：
<tr>
<th> </th>
<td>
<div
id="container"
style='width:700px;height:400px'></div>
<input type='hidden'
id='mapLevel' class='a-ipt'
value="{$apply['mapLevel']}"/>
<input type='hidden'
id='longitude' class='a-ipt'
value="{$apply['longitude']}"/>
<input type='hidden'
id='latitude' class='a-ipt'
value="{$apply['latitude']}"/>
</td>
</tr>
相關(guān)JS代碼：
var
container,map,label,marker,mapLevel = 15;
function initQQMap(longitude,latitude,mapLevel){
var container =
document.getElementById("container");
mapLevel = WST.blank(mapLevel,13);
var mapopts,center = null;
mapopts = {zoom: parseInt(mapLevel)};
map = new qq.maps.Map(container,
mapopts);
if(WST.blank(longitude)=='' ||
WST.blank(latitude)==''){
var cityservice = new
qq.maps.CityService({
complete: function (result) {
map.setCenter(result.detail.latLng);
}
});
cityservice.searchLocalCity();
}else{
marker = new qq.maps.Marker({
position:new
qq.maps.LatLng(latitude,longitude),
map:map
});
map.panTo(new
qq.maps.LatLng(latitude,longitude));
}
var url3;
qq.maps.event.addListener(map,
"click", function (e) {
if(marker)marker.setMap(null);
marker = new qq.maps.Marker({
position:e.latLng,
map:map
});
$('#latitude').val(e.latLng.getLat().toFixed(6));
$('#longitude').val(e.latLng.getLng().toFixed(6));
url3 =
encodeURI(window.conf.__HTTP__+'apis.map.qq.com/ws/geocoder/v1/?location=' +
e.latLng.getLat() + "," + e.latLng.getLng() +
"&key="+window.conf.MAP_KEY+"&output=jsonp&&callback=?");
$.getJSON(url3, function (result)
{
if(result.result!=undefined){
document.getElementById("shopAddress").value =
result.result.address;
}else{
document.getElementById("shopAddress").value = "";
}
})
});
qq.maps.event.addListener(map,'zoom_changed',function() {
$('#mapLevel').val(map.getZoom());
});
}
當(dāng)用戶點(diǎn)擊地圖上的坐標(biāo)，會(huì)將選擇地點(diǎn)的經(jīng)緯度存放在html的隱藏域中，然后提交給后臺(tái)并保存入庫(kù)。
我們?cè)谝苿?dòng)端通過WST.location方法獲取當(dāng)前的經(jīng)緯度，然后根據(jù)當(dāng)前經(jīng)緯度與店鋪經(jīng)緯度計(jì)算的距離，向數(shù)據(jù)庫(kù)查詢出在這個(gè)距離內(nèi)的店鋪為附近店鋪。
相關(guān)代碼：
<script type="text/javascript" src="{:WSTProtocol()}3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
WST.location
= function(callback){
var geolocation = new
qq.maps.Geolocation(WST.conf.MAP_KEY, "ShangTaoTX");
var options = {timeout: 8000};
geolocation.getLocation(showPosition,
showErr, options);
function showPosition(position) {
if(typeof(callback)=='function')callback({latitude:position.lat,longitude:position.lng});
};
function showErr() {
if(typeof(callback)=='function')callback({latitude:0,longitude:0});
};
}
以上代碼可以下載安菲多用戶商城系統(tǒng)獲取完整的LBS接入和獲取過程，感謝您的閱讀。
安菲云（www.shangtaoyun.net）致力于電商網(wǎng)站建設(shè)、電商平臺(tái)運(yùn)營(yíng)、電商方案等干貨分享,打造一站式企業(yè)電商服務(wù)平臺(tái)。
