Appointment successful!
A dedicated customer service will contact you later

Mall Demo Appointment

商淘(wstmart)多用戶商城系統是如何實現接入LBS,查找附近商家的功能

2020-07-06 16:51:53 831

Classification:Web Promotion

商淘(wstmart)多用戶商城系統中,查找附近商家主要實現的思路是去數據庫中查看商家表的每條記錄的經緯度,然後跟當前經緯度計算距離,在某個範圍內的則是附近商家。

商淘(wstmart)多用戶商城系統中,有查找附近商家的功能模塊,那麽該功能模塊是如何實現的,其實現的思路原理是什麽?接下來就一起來看看吧。

商淘(wstmart)多用戶商城系統中,查找附近商家主要實現的思路是去數據庫中查看商家表的每條記錄的經緯度,然後跟當前經緯度計算距離,在某個範圍內的則是附近商家。

基於以上的設計思路,那麽需要建立的店鋪設計表需要有liongitude與latitude這兩個經緯度字段,具體如下圖所示:

在商淘(wstmart)多用戶商城系統的後臺中,在進行新增或編輯店鋪時可以根據騰訊地圖接口保存店鋪的經緯度,具體如下圖所示: 


以下是關於商淘(wstmart)多用戶商城系統接入LBS,實現查找附近商家功能的部分代碼介紹:

需要引入JS:<script charset="utf-8" src="{:WSTProtocol()}map.qq.com/api/js?v=2.exp&key={:WSTConf('CONF.mapKey')}"></script>

{:WSTProtocol()}為網址協議,例如http或https

{:WSTConf('CONF.mapKey')}為騰訊地圖申請的key

相關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>

相關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());
    });
}

當用戶點擊地圖上的坐標,會將選擇地點的經緯度存放在html的隱藏域中,然後提交給後臺並保存入庫。

前臺通過WST.location方法獲取當前的經緯度,然後根據當前經緯度與店鋪經緯度計算的距離,向數據庫查詢出在這個距離內的店鋪為附近店鋪。

相關代碼:

<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});
    };
}

以上就是關於商淘(wstmart)多用戶商城系統接入LBS,實現查找附近商家功能的思路、設計表及代碼演示的介紹,若是想要了解關於商淘(wstmart)多用戶商城系統的更多詳細操作設置講解,或想要開發一套屬於自己的多用戶商城系統,可以登錄商淘軟件的官方網站進行咨詢查閱的哦。

Shangtaoyun multi-user mall system
Shangtaoyun three-level distribution system

Popular Tutorials