如何使⽤JS来开发室内地图商场停车场车位管理系统
  在线的功能后，⼿机对室内地图加载⼀个字，要显⽰“快”，⽬前和电脑都可以打开室内地图的要求是3秒内打开，能有定位导航的功能最好，这样⽅便到要去的地⽅。
对于经常逛商场的MM来说，哪⾥有什么商店，停车在哪⾥，电梯、厕所在哪⾥，这些都是⼀些费⼒的事情，如果有⼀个商场地图可以整体全局预览，那是很⽅便的。
⽬前就根据商场停车项⽬需求，先如何到⼀个商场停车场车位的事情说起。
  商场停车场车位管理系统其实上是⼀个很⼤的系统，⾸先需要从车位是否被占⽤的事情说起，
⽅案1：最简单的⽅案采⽤摄像头识别车位是否被占⽤，然后最好能够识别出车牌，这样反向寻车的事情就好搞多了。
有了车位状态，后台管理系统进⾏管理就⽅便多了，所有的数据全部存储到数据库中，有摄像头，还可以实现查看全程录像，保证停车的安全性。
⽅案2：采⽤车位探测器，向后台送数据，然后⽤户开车到车位后，⾃⼰在地图界⾯上打卡记录停车位置坐标到后台数据库，这样车的时候再来反向寻车。
此次我们就先讲下容易实现的车位状态如何在地图上进⾏开发展⽰流程进⾏纪录⼀下。
商场停车场车位实时更新状况进⾏了开发，开发过程中使⽤到了ESMap地图编辑器及应⽤实例：
⾸先，创建好的地图进⾏显⽰出来，可以多层全部展⽰出来，还有上下两层连接通道三维模型，看起来效果不错：
其次，设计的开发流程图：
准备⼯作都做好后开始实施：
第⼀步：获取车位信息，创建json模拟数据（投⼊使⽤后直接接⼊后台停车场车位信息数据）；
  为了⽅便开发先创建两份json模拟数据交替使⽤来模拟停车场车位实时更新的情况。⾸先根据地图点击事件采集停车位信息，并将车位随机分配为有车、⽆车和固定车位三种车位情况，然后创建json数据，我分别命名为data0.json和data1.json。采集车位信息代码如下（点击地图后台获取到的直接是json格式数据，是不是⽼⽅便了）：
//根据地图点击事件采集停车位信息
<('mapClickNode', function (event) {
var k = Math.random() > 0.5 ? 1 : 2;
//点击车位获取车位 ID，name，楼层，随机分配状态
console.log("{" + '\n' + '"ID": ' + event.ID + "," + "\n" + '"name": ' + '"' + event.name + '"' +
"," + "\n" + '"fnum": ' + event.FloorNum + "," + "\n" + '"status": ' + k + "\n" + "}");
});
我创建的json数据对象有“车位ID”、“车位name”、车位所在楼层“fnum”和车位状态（“status”：[0,1,2]，0是灰⾊，1是红⾊，2是绿⾊），获取的json数据如下：
{
"put": [{
"ID": …,
"name": "车位…",
"fnum": ,
"status":
}, {
…
}]
}
第⼆步：开启定时器不断刷新数据（这⾥交替变换模拟数据）
开启定时器，使⽤定时器不断刷新数据使停车位处于动态刷新的状态，从⽽达到模拟现实⽣活中停车场的情况。
var pos = 0;
setInterval(function () {
CallLoadData(++pos % 2);
}, 1500);
第三部：加载数据到地图并解析数据
将数据加载到地图后：
1.解析数据：根据车位信息，按车位所在楼层(fnum)、停车状态(status)将车位id分装到创建的⼆维数组中，待下⼀步使⽤；
2.更新车位颜⾊：利⽤f遍历mydata构造函数，获取分装后的楼层(fnum)和其所对应⼆维车位id数组(idlist)，然后使⽤ESMap sdk中的map.changeModelColor()函数更新各个车位状态；
到此95%的⼯程就基本完成啦！
3.更新统计显⽰：车位的状态都实时更新了，数据显⽰也得跟上节奏不是！
var parkData = null;
var color = ["#7eacca", "#ff0000", "#00ff00"];
function CallLoadData(pos) {
var mydata=new Map();
var fileName = 'data' + pos + '.json'; //json数据切换  pos是0是载⼊data0.json，是1载⼊data1.json
$.getJSON(fileName, function (data) {
parkData = data.put;
//1.解析数据
var total =  0;
for (var i = 0, len = parkData.length; i < len; ++i) {
var m = parkData[i];
var d = (m.fnum);//map的get⽅法读取对应的键名(key)，如果不到key则返回undefined
if(d == undefined)
{//如果d为undefined就创建⼀个对象分装车位id
d = {"idlist":[[],[],[]]};
}
total++;
d.idlist[m.status].push(m.ID);
mydata.set(m.fnum,d);
}
var showtext="";
//2.更新车位颜⾊
for (var d1 of mydata) {
var fnum = d1[0];//键名key => fnum(楼层数)
var Obj = d1[1];//键值value => 对象数组{idlist:[[...],[...],[...]]}
for(var j=0;j<color.length;j++)
{
map.changeModelColor({
id:Obj.idlist[j], //更新车位id数组
fnum, //楼层
color: color[j]
});
}
showtext += map.floorNames[fnum-1]+":"+d.idlist[2].length+"个  ";
}
//3.更新统计显⽰
$("#freedata").html(showtext); //滚动字幕相应楼层剩余停车位数
$("#total").html(total);
});
}
为了使界⾯更加的形象⽣动⼜美观，我⽤jQuery做了⼀个字幕滚动条，让显⽰的数据动起来，代码↓：//滚动字幕
function marquee() {
      　//最外层⼤盒⼦(div)宽
var scrollWidth = $('#i-test-tip').width();
      　//字幕宽
var textWidth = $('.test-tip').width();
var i = scrollWidth;
jquery是什么有什么作用setInterval(function () {
i--;
if (i < -textWidth) {
i = scrollWidth;
}
$('.test-tip').animate({
'left': i + 'px'
}, 8);
}, 8);
}
效(⾼⼤)果(上)如下：
数据载⼊后可点击停车位查看停车位信息和当时的停车情况。代码↓：
var statusname=["固定车位","有车","⽆车"];
//地图点击事件
<("mapClickNode", function (event) {
if (//只有点击停车位才会显⽰信息
event.name == "楼梯"
)
return;
$("#carname").css("color", "rgb(255, 255, 0)").html(event.name); //停车位name for (var i = 0; i < parkData.length; ++i) {
if (event.ID == parkData[i].ID) {
$("#YorN").html(statusname[parkData[i].status]);
}
}
});
到此停车场车位实时更新的功能就完成啦，最终效果如图：
最后还是放出商场停车场在线体验链接：
所有在线的室内功能体验链接:
欢迎留⾔交流！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。