1.描述
本人最近參與基于MVC5+EF6+ Bootstrap3的食品安全監(jiān)管系統(tǒng)設(shè)計、開發(fā)。先前感覺百度地圖很神秘的樣子、高大上的樣子,設(shè)計、開發(fā)過程遇到些問題,經(jīng)查看園子高手指點、示例摸索實踐,終將百度地圖嵌入系統(tǒng)。為感謝各位朋友的幫助,今有空,將基于百度地圖實現(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)計產(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)批號 <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">注冊日期</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)批號-"+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,自刷新時使用.own.loadUrl = tableSetting.dataTable.ajax.url;table.init(tableSetting);},InitMap:function(){//創(chuàng)建Map實例bMap = new BMap.Map("divMap");var point = new BMap.Point(118.060576, 36.842432);bMap.centerAndZoom("山東省禹城市", 15);//添加鼠標(biāo)滾動縮放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號"];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)識。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以上所述是小編給大家介紹的基于百度地圖實現(xiàn)產(chǎn)品銷售的單位位置查看功能設(shè)計與實現(xiàn),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持!
新聞熱點
疑難解答