Design and Implementation of the unit location display function for product sales based on Baidu map, and map product sales

Design and Implementation of the unit location display function for product sales based on Baidu map, and map product sales

1. Description

I recently participated in the design and development of a Food Safety Supervision System Based on MVC5 + EF6 + Bootstrap3. Previously, I felt that Baidu map was very mysterious and tall, and encountered some problems in the design and development processes. After checking the guidance and examples of garden experts, I found that Baidu map will be embedded into the system. I would like to thank all of you for your help. I will share with you the unit location view function for product sales based on Baidu map today. Correction is not recommended.

2. product production batch query

View the product production batch information of the organization, and view the product sales unit information according to the product production batch.

As follows:

3. Product Sales Map

Based on the selected product production batch information, query the province and city in which the product is sold and the number of units in the province and city. Based on the unit address, use Baidu map to display the province and city location of the unit.

As follows:

4. Product Sales map View code

@ {ViewBag. Title = "Index"; Layout = "~ /Views/Shared/_ TableLayout. cshtml ";} @ * toolbar * @ section actionBar {<button class =" btn dark btn-outline btn-circle btn-sm "data-bind =" click: returnCommand "id =" btnCancel "> back to list </button> <button class =" btn dark btn-outline btn-circle btn-sm "data-bind =" click: prevCommand "id =" btnPrev "> previous </button> <button class =" btn dark btn-outline btn-circle btn-sm "data-bind =" click: nextCommand "id =" btnNext "> next </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-gift"> </I> product production information </div> <div class = "tools"> <a href = "javascript :; "class =" collapse "> </a> </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 "> Record Filing Organization <span class = "required"> * </span> </label> <div class = "col-md-5"> <input type = "text" readonly = "r Eadonly "class =" form-control "placeholder =" "data-bind =" value: viewmodel. orgName "name =" OrgName "id =" OrgName "/> </div> <label class =" col-md-1 control-label "> product name <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 class = "Form-group"> <label class = "col-md-1 control-label"> production batch number <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 "> registration date </label> <div class =" col-md-2 "> <input type =" text" readonly = "readonly" class = "form-control" nam E = "RegDate" id = "RegDate" data-bind = "value: viewmodel. regDate "/> </div> <label class =" control-label col-md-1 "> production date </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 "> expiration date </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 class =" portlet box blue "> <div class =" portlet -title "> <div class =" caption "> <I class =" fa-gift "> </I> sales Map </div> <div class =" tools"> <a href = "javascript :; "class =" collapse "> </a> </div> <div class =" portlet-body "> <div class =" form-body form-group "> <Div class = "col-md-5"> <table class = "table-striped table-bordered table-hover dt-responsive" id = "myDataGrid"> <thead> <tr> <th> province and city </th> <th> Number of units </th> </tr> </thead> </table> </div> <div class = "col-md-7"> <div style = "height: 500px; border: 0px solid gray "id =" divMap "> </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); // sets the content of own. viewmodel = ko. mapping. fromJS (ViewModel); own. btnAddVisible = false; own. btnEditVisible = false; own. btnDelVisible = false; own. caption ("production batch number-" + ViewModel. batchN Umber); 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_dat Aload (grid)}, dataTable: {"bStateSave": true,}, rowClick: function (grid, rowData) {own. tableRowClick (grid, rowData) ;}}, options );//! Write down loadUrl, which is used for auto-Refresh. own. loadUrl = tableSetting. dataTable. ajax. url; table. init (tableSetting);}, InitMap: function () {// create Map instance bMap = new BMap. map ("divMap"); var point = new BMap. point (118.060576, 36.842432); bMap. centerAndZoom ("Shandong province city", 15); // Add the mouse to scroll and zoom bMap. enableScrollWheelZoom (); // Add the Thumbnail Control bMap. addControl (new BMap. overviewMapControl ({isOpen: false, anchor: BMAP_ANCHOR_BOTTOM_RIGHT}); // Add the zoom and translation control bMap. addContr Ol (new BMap. navigationControl (); // Add a scale control bMap. addControl (new BMap. scaleControl (); // Add a map control // map. addControl (new BMap. mapTypeControl () ;}, LoadMap: function (cityName, listEnter) {// reposition the city // var mCityName = "Zhuhai City, Guangdong Province"; bMap. centerAndZoom (cityName, 12); // var mAddress = ["2 floor, Jinan building, Lane 3, Shihua, east, Jiuzhou Avenue, Xiangzhou District", "17 Juan Street, Nanping town, Xiangzhou District"]; for (var I = 0; I <listEnter. length; I ++) {// console. log (mAddress [I]); own. loadMarker (cityName, listEnter [I]) ;}}, LoadMarker: function (cityName, enterinfo) {// mark var mGeocoder = new BMap for the city unit. 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); mark Er. setLabel (new BMap. label (enterinfo. enterName, {offset: new BMap. size (20,-10)}); var content = "<table>"; content = content + "<tr> <td> name:" + enterinfo. enterName + "</td> </tr>"; content = content + "<tr> <td> address: "+ mAddress +" </td> </tr> "; content + =" </table> "; var infowindow = new BMap. infoWindow (content); marker. addEventListener ("click", function () {this. openInfoWindow (infowindow) ;}}}, cityName) ;}, tableR OwClick: 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); // reload the map own. loadMap (rowData. provinceName + "" + rowData. cityName, result. data) ;}); this. base (grid, rowData) ;}, returnCommand: function () {// return to the product production batch list App. jumpTo ({url: "/Basic/ProductBatch/Index", data: {Id: this. currentId }}) ;}, prevCommand: function () {if (this. prevId = undefined | this. prevId = null | this. prevId = "") {alert ("last blank, no other Result! "); 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 ("the next one is empty. No other results are returned! "); 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. Product Sales map Controler code

# Region Sales map 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; // read the current sampling task and the ID of the top and bottom sampling task. 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 ("product production information cannot be blank! ");} // 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 _ response; public ActionResult GetBAreaStatistics (Guid ProductId, Guid BatchId) {try {ReturnResult mReturn = _ response. 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

The above section describes the design and implementation of the unit location display function for product sales based on Baidu map. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!