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


Posted in Javascript onOctober 21, 2016

1.描述

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

2.产品生产批次查询

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

效果图如下:

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

3.产品销售地图

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

效果图如下:

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

4.产品销售地图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>产品生产信息
</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">产品名称 <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">生产批号 <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">生产日期</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>市区</th>
<th>单位家数</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);
//设置内容
own.viewmodel = ko.mapping.fromJS(ViewModel);
own.btnAddVisible = false;
own.btnEditVisible = false;
own.btnDelVisible = false;
own.Caption("生产批号-"+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(){
//创建Map实例
bMap = new BMap.Map("divMap");
var point = new BMap.Point(118.060576, 36.842432);
bMap.centerAndZoom("山东省禹城市", 15);
//添加鼠标滚动缩放
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 = ["香洲区九洲大道东石花三巷吉南大厦2楼","香洲区南屏镇居安街17号"];
for(var i=0;i < listEnter.length;i++)
{
//console.log(mAddress[i]);
own.LoadMarker(cityName,listEnter[i]);
}
}
,LoadMarker:function(cityName,enterinfo){
//为城市单位标注
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 () {
//返回产品生产批次列表
App.jumpTo({ url: "/Basic/ProductBatch/Index", data: { Id:this.CurrentId } });
},
prevCommand: function () {
if (this.PrevId == undefined || this.PrevId == null || this.PrevId == "") {
alert("上一条为空,已没有其它结果!");
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("下一条为空,已没有其它结果!");
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.产品销售地图 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

以上所述是小编给大家介绍的基于百度地图实现产品销售的单位位置查看功能设计与实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js调用activeX获取u盘序列号的代码
Nov 21 Javascript
JavaScript中的eval()函数详解
Aug 22 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 Javascript
Javascript中parseInt的正确使用方式
Oct 17 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
vue v-on:click传递动态参数的步骤
Sep 11 Javascript
node.js学习之base64编码解码
Oct 21 #Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 #Javascript
利用Node.JS实现邮件发送功能
Oct 21 #Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 #Javascript
BootStrap网页中代码显示用法详解
Oct 21 #Javascript
网页瀑布流布局jQuery实现代码
Oct 21 #Javascript
js运动事件函数详解
Oct 21 #Javascript
You might like
简单易用的计数器(数据库)
2006/10/09 PHP
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
php微信开发之关注事件
2018/06/14 PHP
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
PHP PDO操作总结
2014/11/17 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
浅谈Python爬取网页的编码处理
2016/11/04 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
小学教师学期末自我评价
2013/09/25 职场文书
超市营业员求职简历的自我评价
2013/10/17 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
学生会主席演讲稿
2014/04/25 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
个人授权委托书样本
2014/09/13 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
2014年法务工作总结
2014/12/11 职场文书
小学生学习保证书
2015/02/26 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python