基于百度地图的产品销售的单位查看功能设计与实现

Posted 专注于房地产领域信息化-管理系统开发

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于百度地图的产品销售的单位查看功能设计与实现相关的知识,希望对你有一定的参考价值。

基于百度地图实现产品销售的单位位置查看功能设计与实现

1.描述

  本人最近参与基于MVC5+EF6+ Bootstrap3的食品安全监管系统设计、开发。先前感觉百度地图很神秘的样子、高大上的样子,设计、开发过程遇到些问题,经查看园子高手指点、示例摸索实践,终将百度地图嵌入系统。为感谢各位朋友的帮助,今有空,将基于百度地图实现产品销售的单位位置查看功能,分享给大家。不当之处,欢迎指正。

 

2.产品生产批次查询

  查看单位产品生产批次信息,根据产品生产批次查看,产品销售单位情况。

  效果图如下:

 

3.产品销售地图

  根据选择的产品生产批次信息,查询统计产品销售到哪些省市,省市有多少家单位,根据单位地址,使用百度地图显示单位所在省市位置。

  效果图如下:

4.产品销售地图View代码

  1 @{
  2     ViewBag.Title = "Index";
  3     Layout = "~/Views/Shared/_TableLayout.cshtml";
  4 }
  5 
  6 @*工具栏*@
  7 @section actionBar{
  8     <button class="btn dark btn-outline btn-circle btn-sm" data-bind="click: returnCommand" id="btnCancel">返回列表</button>
  9     &nbsp;
 10     <button class="btn dark btn-outline btn-circle btn-sm" data-bind="click: prevCommand" id="btnPrev">上一条</button>
 11     &nbsp;
 12     <button class="btn dark btn-outline btn-circle btn-sm" data-bind="click: nextCommand" id="btnNext">下一条</button>
 13 }
 14 @section CustomContent
 15 {
 16     <form id="frmObj" name="frmObj" class="form-horizontal form-table-bordered"
 17           enctype="multipart/form-data">
 18         <div class="form-body">
 19             <div class="portlet box blue">
 20                 <div class="portlet-title">
 21                     <div class="caption">
 22                         <i class="fa fa-gift"></i>产品生产信息
 23                     </div>
 24                     <div class="tools">
 25                         <a href="javascript:;" class="collapse"> </a>
 26                     </div>
 27                 </div>
 28                 <div class="portlet-body">
 29                     <input type="hidden" id="Id" name="Id" data-bind="value:viewmodel.Id" />
 30                     <input type="hidden" id="OrgId" name="OrgId" data-bind="value:viewmodel.OrgId" />
 31                     <input type="hidden" id="ProductId" name="ProductId" data-bind="value:viewmodel.ProductId" />
 32                     <div class="form-body">
 33                         <div class="form-group">
 34                             <label class="col-md-1 control-label">备案单位 <span class="required"> * </span></label>
 35                             <div class="col-md-5">
 36                                 <input type="text" readonly="readonly" class="form-control" placeholder="" data-bind="value: viewmodel.OrgName" name="OrgName" id="OrgName" />
 37                             </div>
 38                             <label class="col-md-1 control-label">产品名称 <span class="required"> * </span></label>
 39                             <div class="col-md-5">
 40                                 <input type="text" readonly="readonly" class="form-control" placeholder="" data-bind="value: viewmodel.ProductName" name="ProductName" id="ProductName" />
 41                             </div>
 42                         </div>
 43                         <div class="form-group">
 44                             <label class="col-md-1 control-label">生产批号 <span class="required"> * </span></label>
 45                             <div class="col-md-2">
 46                                 <input type="text" readonly="readonly" class="form-control" name="BatchNumber" id="BatchNumber" data-bind="value: viewmodel.BatchNumber" />
 47                             </div>
 48                             <label class="control-label col-md-1">注册日期</label>
 49                             <div class="col-md-2">
 50                                 <input type="text" readonly="readonly" class="form-control" name="RegDate" id="RegDate" data-bind="value: viewmodel.RegDate" />
 51                             </div>
 52                             <label class="control-label col-md-1">生产日期</label>
 53                             <div class="col-md-2">
 54                                 <input type="text" readonly="readonly" class="form-control" name="ProductMakeDate" id="ProductMakeDate" data-bind="value: viewmodel.ProductMakeDate" />
 55                             </div>
 56                             <label class="control-label col-md-1">过期日期</label>
 57                             <div class="col-md-2">
 58                                 <input type="text" readonly="readonly" class="form-control" name="ProductExpDate" id="ProductExpDate" data-bind="value: viewmodel.ProductExpDate" />
 59                             </div>
 60                         </div>
 61                     </div>
 62                 </div>
 63             </div>
 64 
 65             <div class="portlet box blue">
 66                 <div class="portlet-title">
 67                     <div class="caption">
 68                         <i class="fa fa-gift"></i>销售地图
 69                     </div>
 70                     <div class="tools">
 71                         <a href="javascript:;" class="collapse"> </a>
 72                     </div>
 73                 </div>
 74                 <div class="portlet-body">
 75                     <div class="form-body form-group">
 76                         <div class="col-md-5">
 77                             <table class="table table-striped table-bordered table-hover dt-responsive" id="myDataGrid">
 78                                 <thead>
 79                                     <tr>
 80                                         <th>省市</th>
 81                                         <th>市区</th>
 82                                         <th>单位家数</th>
 83                                     </tr>
 84                                 </thead>
 85                             </table>
 86                         </div>
 87                         <div class="col-md-7">
 88                             <div style="height:500px;border:0px solid gray" id="divMap"></div>
 89                         </div>
 90                     </div>
 91                 </div>
 92             </div>
 93         </div>
 94     </form>
 95 }
 96 @section customScript
 97 {
 98     <script src="~/Scripts/page/share/_SecondTableLayout.js"></script>
 99     <script type="text/javascript">
100 
101         var mDataGrid = function () {
102 
103             var TableViewModel = SecondTableLayoutViewModel.extend({
104                 constructor: function (ViewModel) {
105                     this.base(ViewModel, undefined);
106                     //设置内容
107                     own.viewmodel = ko.mapping.fromJS(ViewModel);
108                     own.btnAddVisible = false;
109                     own.btnEditVisible = false;
110                     own.btnDelVisible = false;
111                     own.Caption("生产批号-"+ViewModel.BatchNumber);
112 
113                     own.loadTableData(own.tableOptions,ViewModel.ProductID,ViewModel.Id);
114                     own.ProductId = ViewModel.ProductID;
115                     own.CurrentId = ViewModel.Id;
116                     own.InitMap();
117                 },
118                 viewmodel: null
119                 , ProductId:null
120                 , CurrentId:null
121                 , PrevId: null
122                 , NextId:null
123                 ,bMap:null
124                 ,tableOptions: {
125                         src: $("#myDataGrid"),
126                         dataTable: {
127                         "ajax": {
128                             "url": "/Basic/ProductBatch/GetBAreaStatistics",
129                             "type": "GET"
130                         },
131                         "columns": [
132                             { "data": "ProvinceName" },
133                             { "data": "CityName" },
134                             { "data": "Amount" },
135                         ],
136                     }
137                 }
138                 ,loadTableData: function (options, ProductId, BatchId) {
139                     if (own.grid != undefined)
140                         return;
141                     //console.log(ProductId+"|"+BatchId);
142                     var table = own.getTable();
143                     table.clearAjaxParams();
144                     table.addAjaxParam("ProductId", ProductId);
145                     table.addAjaxParam("BatchId", BatchId);
146 
147                     var tableSetting = $.extend({}, {
148                         onSuccess: function (grid, response) { own.table_on_success(grid, response); },
149                         onError: function (grid) { own.table_on_error(grid) },
150                         onDataLoad: function (grid) { own.table_on_dataload(grid) },
151 
152                         dataTable: {
153                             "bStateSave": true,
154                         },
155                         rowClick: function (grid, rowData) {
156                             own.tableRowClick(grid, rowData);
157                         }
158                     }, options);
159                     //! 记下loadUrl,自刷新时使用.
160                     own.loadUrl = tableSetting.dataTable.ajax.url;
161                     table.init(tableSetting);
162                 }
163                 ,InitMap:function(){
164                     //创建Map实例
165                     bMap = new BMap.Map("divMap");
166                     var point = new BMap.Point(118.060576, 36.842432);
167                     bMap.centerAndZoom("山东省禹城市", 15);
168                     //添加鼠标滚动缩放
169                     bMap.enableScrollWheelZoom();
170 
171                     //添加缩略图控件
172                     bMap.addControl(new BMap.OverviewMapControl({ isOpen: false, anchor: BMAP_ANCHOR_BOTTOM_RIGHT }));
173                     //添加缩放平移控件
174                     bMap.addControl(new BMap.NavigationControl());
175                     //添加比例尺控件
176                     bMap.addControl(new BMap.ScaleControl());
177                     //添加地图类型控件
178                     //map.addControl(new BMap.MapTypeControl());
179                 }
180                 ,LoadMap:function(cityName,listEnter){
181                     //重新定位城市
182                     //var mCityName = "广东省珠海市";
183                     bMap.centerAndZoom(cityName, 12);
184                     //var mAddress = ["香洲区九洲大道东石花三巷吉南大厦2楼","香洲区南屏镇居安街17号"];
185                     for(var i=0;i < listEnter.length;i++)
186                     {
187                         //console.log(mAddress[i]);
188                         own.LoadMarker(cityName,listEnter[i]);
189                     }
190                 }
191                 ,LoadMarker:function(cityName,enterinfo){
192                     //为城市单位标注
193                     var mGeocoder = new BMap.Geocoder();
194                     var mAddress = enterinfo.Address;
195                     if(enterinfo.Address == "")
196                     {
197                         mAddress = enterinfo.AreaName+enterinfo.StreetName;
198                     }
199                     if(mAddress == "")
200                         return;
201 
202                     mGeocoder.getPoint(mAddress, function(point){
203                         if (point) {
204                             var mPoint = new BMap.Point(point.lng, point.lat);
205                             var marker = new BMap.Marker(mPoint);
206                             bMap.addOverlay(marker);
207 
208                             marker.setLabel(new BMap.Label(enterinfo.EnterName,{offset:new BMap.Size(20,-10)}));
209 
210                             var content = "<table>";
211                             content = content + "<tr><td> 名称:"+enterinfo.EnterName+"</td></tr>";
212                             content = content + "<tr><td> 地址:"+mAddress+"</td></tr>";
213                             content += "</table>";
214                             var infowindow = new BMap.InfoWindow(content);
215                             marker.addEventListener("click", function () {
216                                 this.openInfoWindow(infowindow);
217                             });
218                         }
219                     }, cityName);
220                 }
221                 ,tableRowClick: function (grid, rowData) {
222                     if(rowData == undefined)
223                         return;
224                     console.log(rowData.ProvinceName+" "+ rowData.CityName);
225                     $.post("/Basic/ProductBatch/GetBEnterStatistics"
226                         , { ProductId: own.ProductId, BatchId: own.CurrentId,ProvinceName:rowData.ProvinceName,CityName:rowData.CityName }
227                         , function (result) {
228                             if(result.ResultType != undefined)
229                                 return;
230                             //console.log(JSON.stringify(result));
231                             //重新加载地图
232                             own.LoadMap(rowData.ProvinceName+""+ rowData.CityName,result.data);
233                     });
234                     this.base(grid, rowData);
235                 }
236                 ,returnCommand: function () {
237                     //返回产品生产批次列表
238                     App.jumpTo({ url: "/Basic/ProductBatch/Index", data: { Id:this.CurrentId } });
239                 },
240                 prevCommand: function () {
241                     if (this.PrevId == undefined || this.PrevId == null || this.PrevId == "") {
242                         alert("上一条为空,已没有其它结果!");
243                         return;
244                     }
245                     App.jumpTo({ url: "/Basic/ProductBatch/IndexMap", data: { ProductId:this.ProductId, BatchId: this.PrevId } });
246                 },
247                 nextCommand: function () {
248                     if (this.NextId == undefined || this.NextId == null || this.NextId == "") {
249                         alert("下一条为空,已没有其它结果!");
250                         return;
251                     }
252                     App.jumpTo({ url: "/Basic/ProductBatch/IndexMap", data: { ProductId:this.ProductId, BatchId: this.NextId } });
253                 },
254             });
255 
256             return {
257                 init: function (ViewModel,PrevId,NextId) {
258                     SecondTableLayoutViewModel.resetKoBindID("divIndexView");
259                     var node = document.getElementById("divIndexView");
260                     ko.cleanNode(node);
261                     //console.log(JSON.stringify(ViewModel));
262                     var mTableViewModel = new TableViewModel(ViewModel);
263                     mTableViewModel.ProductId = ViewModel.ProductID;
264                     mTableViewModel.PrevId = PrevId;
265                     mTableViewModel.NextId = NextId;
266                     ko.applyBindings(mTableViewModel, node);
267                 }
268             };
269         }();
270 
271         jQuery(document).ready(function () {
272             var mPrevId = "@ViewBag.PrevId";
273             var mNextId = "@ViewBag.NextId";
274             mDataGrid.init(@Html.Raw(ViewBag.ViewModel),mPrevId,mNextId);
275         });
276     </script>
277 }

 5.产品销售地图 Controler 代码

 #region 销售地图
        public ActionResult IndexMap(Guid ProductId, Guid BatchId)
        {
            try
            {
                List<ProductBatchViewModel> list = _IProductBatchs.GetEntityList(t => t.IsDelete == false && t.ProductID == ProductId);

                ProductBatchViewModel mViewModel = null;
                string mPrevId = string.Empty, mNextId = string.Empty;
                //读取当前抽检任务及上、下抽检任务标识。
                for (int index = 0; index < list.Count; index++)
                {
                    if (list[index].Id == BatchId)
                    {
                        mViewModel = list[index];
                        if (list.Count > index + 1)
                            mNextId = list[index + 1].Id.ToString();
                        break;
                    }
                    mPrevId = list[index].Id.ToString();
                }
                if (mViewModel == null)
                {
                    return this.ResultError("产品生产信息不能为空!");
                }
                //ReturnResult mReturn = _IProductBatchSup.GetBAreaStatistics(ProductId, BatchId);
                //if (mReturn.State == false)
                //    return this.ResultError(mReturn.Message);
                //mViewModel.PBatchBArea = (ICollection<PBatchBAreaStatistics>)mReturn.Result;

                ViewBag.bCreate = 0;
                ViewBag.ProductId = ProductId;
                ViewBag.PrevId = mPrevId;
                ViewBag.NextId = mNextId;

                ViewBag.ViewModel = mViewModel.ToViewModel();
                return View("_IndexMap");
            }
            catch (Exception e)
            {
                return this.ResultError(e.Message);
            }
        }
        [Import(typeof(IProductBatchSup))]
        public IProductBatchSup _IProductBatchSup;
        public ActionResult GetBAreaStatistics(Guid ProductId, Guid BatchId)
        {
            try
            {
                ReturnResult mReturn = _IProductBatchSup.GetBAreaStatistics(ProductId,BatchId);
                if (mReturn.State == false)
                    return this.ResultError(mReturn.Message);
                
                return JsonNetResult.toDataTable(mReturn.Result);
            }
            catch (Exception e)
            {
                return this.ResultError(e.Message);
            }
        }

        public ActionResult GetBEnterStatistics(Guid ProductId, Guid BatchId,string ProvinceName, string CityName)
        {
            try
            {
                ReturnResult mReturn = _IProductBatchSup.GetBEnterStatistics(ProductId, BatchId,ProvinceName,CityName);
                if (mReturn.State == false)
                    return this.ResultError(mReturn.Message);

                return JsonNetResult.toDataTable(mReturn.Result);
            }
            catch (Exception e)
            {
                return this.ResultError(e.Message);
            }
        }

        #endregion

 

以上是关于基于百度地图的产品销售的单位查看功能设计与实现的主要内容,如果未能解决你的问题,请参考以下文章

对于百度地图新推出的热力图,国内外是不是有其他类似的产品

Vue项目引用百度地图并实现搜索定位等功能

android 版百度地图如何通过定位功能获得当前的位置所在的城市?

MapView地图缓存如何实现?

如何运用百度地图web uri api

基于百度地图的电子围栏的实现之地理位置检索