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


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控制淡入淡出示例代码
Nov 12 Javascript
jquery获取复选框被选中的值
Apr 10 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
关于vue编译版本引入的问题的解决
Sep 17 Javascript
详解vue后台系统登录态管理
Apr 02 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 Javascript
JavaScript如何操作css
Oct 24 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
PHP网上调查系统
2006/10/09 PHP
基于pear auth实现登录验证
2010/02/26 PHP
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
在PHP中使用redis
2013/11/04 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
javascript学习之闭包分析
2010/12/02 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
python hook监听事件详解
2018/10/25 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
小学教师自我鉴定
2013/11/07 职场文书
施工资料员的岗位职责
2013/12/22 职场文书
小学毕业感言500字
2014/02/28 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
学校食品安全责任书
2015/01/29 职场文书
话题作文之呼唤
2019/12/18 职场文书
MySQL新手入门进阶语句汇总
2022/09/23 MySQL