基于百度地圖實(shí)現(xiàn)產(chǎn)品銷售的單位位置查看功能設(shè)計(jì)與實(shí)現(xiàn)
1.描述
本人最近參與基于MVC5+EF6+ Bootstrap3的食品安全監(jiān)管系統(tǒng)設(shè)計(jì)、開發(fā)。先前感覺百度地圖很神秘的樣子、高大上的樣子,設(shè)計(jì)、開發(fā)過程遇到些問題,經(jīng)查看園子高手指點(diǎn)、示例摸索實(shí)踐,終將百度地圖嵌入系統(tǒng)。為感謝各位朋友的幫助,今有空,將基于百度地圖實(shí)現(xiàn)產(chǎn)品銷售的單位位置查看功能,分享給大家。不當(dāng)之處,歡迎指正。
2.產(chǎn)品生產(chǎn)批次查詢
查看單位產(chǎn)品生產(chǎn)批次信息,根據(jù)產(chǎn)品生產(chǎn)批次查看,產(chǎn)品銷售單位情況。
效果圖如下:
3.產(chǎn)品銷售地圖
根據(jù)選擇的產(chǎn)品生產(chǎn)批次信息,查詢統(tǒng)計(jì)產(chǎn)品銷售到哪些省市,省市有多少家單位,根據(jù)單位地址,使用百度地圖顯示單位所在省市位置。
效果圖如下:
4.產(chǎn)品銷售地圖View代碼
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_TableLayout.cshtml"; } @*工具欄*@ @section actionBar{ <button class="btn dark btn-outline btn-circle btn-sm" data-bind="click: returnCommand" id="btnCancel">返回列表</button> <button class="btn dark btn-outline btn-circle btn-sm" data-bind="click: prevCommand" id="btnPrev">上一條</button> <button class="btn dark btn-outline btn-circle btn-sm" data-bind="click: nextCommand" id="btnNext">下一條</button> } @section CustomContent { <form id="frmObj" name="frmObj" class="form-horizontal form-table-bordered" enctype="multipart/form-data"> <div class="form-body"> <div class="portlet box blue"> <div class="portlet-title"> <div class="caption"> <i class="fa fa-gift"></i>產(chǎn)品生產(chǎn)信息 </div> <div class="tools"> <a href="javascript:;" class="collapse"> </a> </div> </div> <div class="portlet-body"> <input type="hidden" id="Id" name="Id" data-bind="value:viewmodel.Id" /> <input type="hidden" id="OrgId" name="OrgId" data-bind="value:viewmodel.OrgId" /> <input type="hidden" id="ProductId" name="ProductId" data-bind="value:viewmodel.ProductId" /> <div class="form-body"> <div class="form-group"> <label class="col-md-1 control-label">備案單位 <span class="required"> * </span></label> <div class="col-md-5"> <input type="text" readonly="readonly" class="form-control" placeholder="" data-bind="value: viewmodel.OrgName" name="OrgName" id="OrgName" /> </div> <label class="col-md-1 control-label">產(chǎn)品名稱 <span class="required"> * </span></label> <div class="col-md-5"> <input type="text" readonly="readonly" class="form-control" placeholder="" data-bind="value: viewmodel.ProductName" name="ProductName" id="ProductName" /> </div> </div> <div class="form-group"> <label class="col-md-1 control-label">生產(chǎn)批號(hào) <span class="required"> * </span></label> <div class="col-md-2"> <input type="text" readonly="readonly" class="form-control" name="BatchNumber" id="BatchNumber" data-bind="value: viewmodel.BatchNumber" /> </div> <label class="control-label col-md-1">注冊(cè)日期</label> <div class="col-md-2"> <input type="text" readonly="readonly" class="form-control" name="RegDate" id="RegDate" data-bind="value: viewmodel.RegDate" /> </div> <label class="control-label col-md-1">生產(chǎn)日期</label> <div class="col-md-2"> <input type="text" readonly="readonly" class="form-control" name="ProductMakeDate" id="ProductMakeDate" data-bind="value: viewmodel.ProductMakeDate" /> </div> <label class="control-label col-md-1">過期日期</label> <div class="col-md-2"> <input type="text" readonly="readonly" class="form-control" name="ProductExpDate" id="ProductExpDate" data-bind="value: viewmodel.ProductExpDate" /> </div> </div> </div> </div> </div> <div class="portlet box blue"> <div class="portlet-title"> <div class="caption"> <i class="fa fa-gift"></i>銷售地圖 </div> <div class="tools"> <a href="javascript:;" class="collapse"> </a> </div> </div> <div class="portlet-body"> <div class="form-body form-group"> <div class="col-md-5"> <table class="table table-striped table-bordered table-hover dt-responsive" id="myDataGrid"> <thead> <tr> <th>省市</th> <th>市區(qū)</th> <th>單位家數(shù)</th> </tr> </thead> </table> </div> <div class="col-md-7"> <div style="height:500px;border:0px solid gray" id="divMap"></div> </div> </div> </div> </div> </div> </form> } @section customScript { <script src="~/Scripts/page/share/_SecondTableLayout.js"></script> <script type="text/javascript"> var mDataGrid = function () { var TableViewModel = SecondTableLayoutViewModel.extend({ constructor: function (ViewModel) { this.base(ViewModel, undefined); //設(shè)置內(nèi)容 own.viewmodel = ko.mapping.fromJS(ViewModel); own.btnAddVisible = false; own.btnEditVisible = false; own.btnDelVisible = false; own.Caption("生產(chǎn)批號(hào)-"+ViewModel.BatchNumber); own.loadTableData(own.tableOptions,ViewModel.ProductID,ViewModel.Id); own.ProductId = ViewModel.ProductID; own.CurrentId = ViewModel.Id; own.InitMap(); }, viewmodel: null , ProductId:null , CurrentId:null , PrevId: null , NextId:null ,bMap:null ,tableOptions: { src: $("#myDataGrid"), dataTable: { "ajax": { "url": "/Basic/ProductBatch/GetBAreaStatistics", "type": "GET" }, "columns": [ { "data": "ProvinceName" }, { "data": "CityName" }, { "data": "Amount" }, ], } } ,loadTableData: function (options, ProductId, BatchId) { if (own.grid != undefined) return; //console.log(ProductId+"|"+BatchId); var table = own.getTable(); table.clearAjaxParams(); table.addAjaxParam("ProductId", ProductId); table.addAjaxParam("BatchId", BatchId); var tableSetting = $.extend({}, { onSuccess: function (grid, response) { own.table_on_success(grid, response); }, onError: function (grid) { own.table_on_error(grid) }, onDataLoad: function (grid) { own.table_on_dataload(grid) }, dataTable: { "bStateSave": true, }, rowClick: function (grid, rowData) { own.tableRowClick(grid, rowData); } }, options); //! 記下loadUrl,自刷新時(shí)使用. own.loadUrl = tableSetting.dataTable.ajax.url; table.init(tableSetting); } ,InitMap:function(){ //創(chuàng)建Map實(shí)例 bMap = new BMap.Map("divMap"); var point = new BMap.Point(118.060576, 36.842432); bMap.centerAndZoom("山東省禹城市", 15); //添加鼠標(biāo)滾動(dòng)縮放 bMap.enableScrollWheelZoom(); //添加縮略圖控件 bMap.addControl(new BMap.OverviewMapControl({ isOpen: false, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //添加縮放平移控件 bMap.addControl(new BMap.NavigationControl()); //添加比例尺控件 bMap.addControl(new BMap.ScaleControl()); //添加地圖類型控件 //map.addControl(new BMap.MapTypeControl()); } ,LoadMap:function(cityName,listEnter){ //重新定位城市 //var mCityName = "廣東省珠海市"; bMap.centerAndZoom(cityName, 12); //var mAddress = ["香洲區(qū)九洲大道東石花三巷吉南大廈2樓","香洲區(qū)南屏鎮(zhèn)居安街17號(hào)"]; for(var i=0;i < listEnter.length;i++) { //console.log(mAddress[i]); own.LoadMarker(cityName,listEnter[i]); } } ,LoadMarker:function(cityName,enterinfo){ //為城市單位標(biāo)注 var mGeocoder = new BMap.Geocoder(); var mAddress = enterinfo.Address; if(enterinfo.Address == "") { mAddress = enterinfo.AreaName+enterinfo.StreetName; } if(mAddress == "") return; mGeocoder.getPoint(mAddress, function(point){ if (point) { var mPoint = new BMap.Point(point.lng, point.lat); var marker = new BMap.Marker(mPoint); bMap.addOverlay(marker); marker.setLabel(new BMap.Label(enterinfo.EnterName,{offset:new BMap.Size(20,-10)})); var content = "<table>"; content = content + "<tr><td> 名稱:"+enterinfo.EnterName+"</td></tr>"; content = content + "<tr><td> 地址:"+mAddress+"</td></tr>"; content += "</table>"; var infowindow = new BMap.InfoWindow(content); marker.addEventListener("click", function () { this.openInfoWindow(infowindow); }); } }, cityName); } ,tableRowClick: function (grid, rowData) { if(rowData == undefined) return; console.log(rowData.ProvinceName+" "+ rowData.CityName); $.post("/Basic/ProductBatch/GetBEnterStatistics" , { ProductId: own.ProductId, BatchId: own.CurrentId,ProvinceName:rowData.ProvinceName,CityName:rowData.CityName } , function (result) { if(result.ResultType != undefined) return; //console.log(JSON.stringify(result)); //重新加載地圖 own.LoadMap(rowData.ProvinceName+""+ rowData.CityName,result.data); }); this.base(grid, rowData); } ,returnCommand: function () { //返回產(chǎn)品生產(chǎn)批次列表 App.jumpTo({ url: "/Basic/ProductBatch/Index", data: { Id:this.CurrentId } }); }, prevCommand: function () { if (this.PrevId == undefined || this.PrevId == null || this.PrevId == "") { alert("上一條為空,已沒有其它結(jié)果!"); return; } App.jumpTo({ url: "/Basic/ProductBatch/IndexMap", data: { ProductId:this.ProductId, BatchId: this.PrevId } }); }, nextCommand: function () { if (this.NextId == undefined || this.NextId == null || this.NextId == "") { alert("下一條為空,已沒有其它結(jié)果!"); return; } App.jumpTo({ url: "/Basic/ProductBatch/IndexMap", data: { ProductId:this.ProductId, BatchId: this.NextId } }); }, }); return { init: function (ViewModel,PrevId,NextId) { SecondTableLayoutViewModel.resetKoBindID("divIndexView"); var node = document.getElementById("divIndexView"); ko.cleanNode(node); //console.log(JSON.stringify(ViewModel)); var mTableViewModel = new TableViewModel(ViewModel); mTableViewModel.ProductId = ViewModel.ProductID; mTableViewModel.PrevId = PrevId; mTableViewModel.NextId = NextId; ko.applyBindings(mTableViewModel, node); } }; }(); jQuery(document).ready(function () { var mPrevId = "@ViewBag.PrevId"; var mNextId = "@ViewBag.NextId"; mDataGrid.init(@Html.Raw(ViewBag.ViewModel),mPrevId,mNextId); }); </script> }
5.產(chǎn)品銷售地圖 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; //讀取當(dāng)前抽檢任務(wù)及上、下抽檢任務(wù)標(biāo)識(shí)。 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("產(chǎn)品生產(chǎn)信息不能為空!"); } //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
以上所述是小編給大家介紹的基于百度地圖實(shí)現(xiàn)產(chǎn)品銷售的單位位置查看功能設(shè)計(jì)與實(shí)現(xiàn),希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
不到30行JS代碼實(shí)現(xiàn)Excel表格的方法
這篇文章主要介紹了不到30行JS代碼實(shí)現(xiàn)Excel表格的方法,實(shí)現(xiàn)方法簡(jiǎn)單易懂,非常具有實(shí)用價(jià)值,可部分代替jQuery的功能,需要的朋友可以參考下2014-11-1122種JavaScript中數(shù)組常用API總結(jié)
在前端開發(fā)中,數(shù)組是一種常見且重要的數(shù)據(jù)結(jié)構(gòu),本文主要介紹了前端中數(shù)組常用的API,包括添加、刪除、截取、合并、轉(zhuǎn)換等操作,希望對(duì)大家有所幫助2023-05-05微信小程序 如何獲取網(wǎng)絡(luò)狀態(tài)
這篇文章主要介紹了微信小程序 如何獲取網(wǎng)絡(luò)狀態(tài),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07關(guān)于Iframe父頁(yè)面與子頁(yè)面之間的相互調(diào)用
下面小編就為大家?guī)硪黄P(guān)于Iframe父頁(yè)面與子頁(yè)面之間的相互調(diào)用。小編覺得挺不錯(cuò)的,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-11-11JavaScript的基礎(chǔ)語(yǔ)法和數(shù)據(jù)類型詳解
這篇文章主要介紹了JavaScript的基礎(chǔ)語(yǔ)法和數(shù)據(jù)類型,保姆級(jí)的詳細(xì)教程,萬字長(zhǎng)文詳細(xì)的列出了JavaScript的各種語(yǔ)法,建議收藏系列,希望可以有所幫助2021-09-09