公司为什么要用的baiduAPI.js?
公司做的供应链，需要把百度地图接入 看运输的货物走的路线，在某个地点停放了多久【配套硬件是GPS设备】，这里就不多讲，这里我只讲公司怎么运用baiduAPI.的一些方法和实现的功能。
想拿学以致用的加QQ：83188296 我会把源码给你
引用的文件：
<script src="/PubSrc/head.js"></script>
<!--<script src="js/jquery-2.1.1.min.js"></script>-->
<script src="../scripts/jquery.idTabs.js"></script>
<script src="../scripts/baiduKey.js"></script>
<script src="../scripts/baiduAPI.js"></script>
<script src="../scripts/mapController.js"></script>
把js放上去 初始化地图会出现在这种效果：
自带缩放功能
然后是怎么点击一个车牌号或者订单号 出现当前的位置，出现位置标点是根据百度地图的经纬度来计算的，查到表中的经度纬度，把查到的经纬度放到放置图标的那个方法里面 就自然出图标了。代码如下:
给查到的表格里面的某一条数据 添加一个超链接 去查车辆或者订单号表绑定的GPSid表中的经纬度【SelectLonAndLat】
/*
订单号的数据表格
*/
function CreateOrderList(divID, height){
g_OrderList = $(divID).lnkGrid({
columns: [
{ display: '订单号', name: 'waybill_no', width:170, align:"left",
render: function (rowdata, rowindex, value)
{
return "<a href='javascript:SelectLonAndLat(" + rowdata.vehicle_id +")'>" +value +"</a> "; //订单号的超链接
},
}
],
pageSize: 30, //默认分页30条
method: 'get', url:"?page=Map&pcmd=SearchOrderList&tm=" + (new Date()).getTime(),
width: '95%' , height: height, //设置宽度
rownumbers:true,
alternatingRow:true,
checkbox:false
});
return g_OrderList;
}
好，这里我们查到了经纬度，因为我现在做的开发使用C++，java的话用SSM，SSH,或者随意什么框架只要用自己熟悉的取数据的方式拿到数据就行。
拿到数据之后赋值：var Longitude = xmlRet.getValueByName("Longitude"); //定义经度 var Latitude = xmlRet.getValueByName("Latitude"); //定义纬度
赋值完以后调用百度的方法：
PutTrack(Longitude,Latitude); 那么这个方法是什么意思呢？
/*
把图标放到相应的经纬度的位置
//oPlayMarker=播放时的点
*/
function PutTrack(Longitude,Latitude) {
//绘制播放图标 如果之前有值的话 那就说明已经有图标了 清空掉再放
if (oPlayMarker != null)
{
map.removeOverlay(oPlayMarker);
oPlayMarker = null;
}
var tLastLon = Longitude; //定义经纬度
var tLastLat = Latitude;
console.log(tLastLon,tLastLat); //打印出走的经纬度
var oLL02 = LL84To02(tLastLon, tLastLat);//经纬度转换
var vMPoint = createLngLatObj(tLastLon, tLastLat, oLL02.lon, oLL02.lat);//创建经纬度对象
oPlayMarker = map.createMarker(vMPoint, {//创建一个位置图标
icon: "../image/loCar.png",//图标图片路径
width: 22,
height: 31,
offsetType: 1
});
map.addOverlay(oPlayMarker);//将位置图标添加到地图上
//置位地图中心点
var bdBounds = map.getViewBounds();//获取地图的可视范围
if (!map.IsLLObjInBounds(vMPoint, bdBounds)) { //经纬度是否在某个边界内
map.setMapCenter(vMPoint);//设置地图中心点
}
iPlayRowNum = 0;
};
效果：
这里的线不用管 我后面会讲怎么画线，那我们怎么画线呢：
大概流程：先查到一堆数据 假设30条，拿到30条数据的经纬度 用数组的方式接收 再把30条经纬度用线的方式连接起来。
连线的代码：
先做一个查询的按钮吧： 用的hisinput和button 代码如下：
<!--车辆的历史轨迹列表 -->
<div id="ltab2" style="height: 232px;">
<!-- <div class="lnkFormArea">-->
<div align="center">
<tr >
<td >开始时间:<input type="date"id="DateStart" value="开始时间"/>
时分:<input type="text" style="width:50px; height=80px;" id="DateStartHour" value=""/>
</td>
----->
<td >结束时间:<input type="date" id="DateEnd" value="结束时间"/>
时分:<input type="text" style="width:50px; height=80px;" id="DateEndHour" value=""/></td>
<td ><input type="button" value="查询" onclick="SearchTrackList()"/></td>
</tr>
</div>
<!-- </div>-->
<div id="Track_list"></div>
</div>
效果图：
设置查询的日期默认值：我设置的是当前时间到前两个月的：
//设置开始与结束时间的默认值
var tmObj = new cTime();
tmObj.Add(-70*24*3600);
var strFrom = tmObj.ToStr('YYYY-MM-DD');
tmObj.Set(0); //reset to today.
var strTo = tmObj.ToStr('YYYY-MM-DD');
调用数据查询的方法： 加了一些判断可以看一下
/*
点击查询车辆轨迹的按钮事件
*/
function SearchTrackList(){
var DateStart=$("#DateStart").val(); //判断开始和结束日期是否为空
var DateEnd=$("#DateEnd").val();
if(DateStart==""||DateStart==null){
alert("请选择开始时间！");
return false;
}
if(DateEnd==""||DateEnd==null){
alert("请选择结束时间！");
return false;
}
if (aTableDatas_gps != null) { //如果播放时的线对象不为空的话
aTableDatas_gps=[]; //清空轨迹表格 不加这个东西的话查询没数据会播放上一条
}
var startNum = parseInt(DateStart.replace(/-/g,''),10);
var endNum = parseInt(DateEnd.replace(/-/g,''),10);
if(startNum>endNum){
alert("结束时间不能在开始时间之前！");
return false;
}
$("#pageloading").show();
var url = "?page=Map&pcmd=SearchTrackList&vehicle_id="+$("#vehicle_id").val()+"&gpsdevice_id="+$("#gpsdevice_id").val();
url+="&DateStart="+$("#DateStart").val();
url+="&DateStartHour="+$("#DateStartHour").val();
url+="&DateEnd="+$("#DateEnd").val();
url+="&DateEndHour="+$("#DateEndHour").val();
url += "&tm=" + (new Date()).getTime();
var ret = AjaxHttpGet(url);//这个行是拿着上面的url进行一次ajax get 方法，相当于这里执行了一次查询，后面的g_track_list._setUrl(url);又会去查询一次，所以是下策
g_track_list._setUrl(url);
g_track_list.changePage("first");//跳转到第一页
$("#pageloading").hide();
var luxian="{\"obj\":"+ret+"}";//拼接成正确的json格式
var obj = eval('(' + luxian + ')');
trackListBack_gps(obj);//把拿到的json格式 在地图上画线连接成线路
}
trackListBack_gps是画线的
/*
在地图上画线连接成路线
*/
function trackListBack_gps(rObj)
{
InitMap();
//if (rObj.obj.HtmNO != htmNO) { return; }//如果当前查询回来的列表数据不是当前的htm单号的，则不绘制。
if (rObj.obj != null && rObj.obj.Rows != null && rObj.obj.Rows.length > 0)
{ //如果获取的json的属性不为空
var aDatasList = rObj.obj.Rows;
aTableDatas_gps=[]; //清空轨迹表格
var firstPoint;
$.merge(aTableDatas_gps, aDatasList);
aLineMPoints_gps = []; //清空轨迹线的经纬度集合
$.each(aTableDatas_gps, function (i, tData)
{//循环遍历出每一对经纬度所在的点 i是下标 下标最大就是最后
if (tData.Longitude == 0 || tData.Latitude == 0)
{
return;
}
var oLL02 = LL84To02(tData.Longitude, tData.Latitude);//经纬度转换
var mPoint = createLngLatObj(tData.Longitude, tData.Latitude, oLL02.lon, oLL02.lat);//创建经纬度对象
mPoint.LocTime = tData.LocTime;//后边通过时间绘制报警线路时使用
if (i ==1)//定位地图中心点
{
firstPoint=mPoint;
//置位地图中心点
var bdBounds = map.getViewBounds();//获取地图的可视范围
if (!map.IsLLObjInBounds(firstPoint, bdBounds)) { //经纬度是否在某个边界内
map.setMapCenter(firstPoint);//设置地图中心点
}
}
aLineMPoints_gps.push(mPoint);//将经纬度对象放到经纬度集合中
//计算地图视野（最小sw，最大ne）
compareLonLat(mPoint);//将创建的经纬度放到比较经纬度的方法去比较
});
oTrackLine_gps = map.createLine(aLineMPoints_gps, { color: aColor.gps });//把每一对经纬度的点连成一条线
//oTrackLine_gps
if (oTrackLine_gps != null)
{//如果线不为空的话
map.addOverlay(oTrackLine_gps);//就把线添加到地图上展示
}
}
else
{
}
};
这中间有一个compareLonLat方法：
/*
比较经纬度的方法
*/
function compareLonLat(mPoint) {
//计算地图视野（最小sw，最大ne）
if (mBounds.sw.lon == 0 || mPoint.lonlat.lon < mBounds.sw.lon) {
mBounds.sw.lon = mPoint.lonlat.lon;
}
if (mBounds.sw.lat == 0 || mPoint.lonlat.lat < mBounds.sw.lat) {
mBounds.sw.lat = mPoint.lonlat.lat;
}
if (mBounds.ne.lon == 0 || mPoint.lonlat.lon > mBounds.ne.lon) {
mBounds.ne.lon = mPoint.lonlat.lon;
}
if (mBounds.ne.lat == 0 || mPoint.lonlat.lat > mBounds.ne.lat) {
mBounds.ne.lat = mPoint.lonlat.lat;
}
};
map.createLine是用来执行百度画线操作的：
所以我们完成了拿数据 把数据的经纬度放到比较经纬度的方法里面去比较 再放点画线 最后显示在地图上的操作。效果图：
因为我放的30条数据就这样子 所以才出个皮卡丘。
这里我没有画图标 有兴趣的去把拿到的第一个经纬度 放到外面第一个放图标的那里就行，我把经度纬度分别拿出来放，同时拿到的精确到是小数点后6位代码：
// var lng=firstPoint.lng;
// var lat=firstPoint.lat;
// var lngNew=lng+"";
// var latNew=lat+"";
// var lngNews;
// var latNews;
// var re = /([0-9]+\.[0-9]{6})[0-9]*/;
// lngNews=lngNew.replace(re,"$1");
// latNews=latNew.replace(re,"$1");
// PutTrack(lngNews,latNews); //置位地图中心点
然后我们是怎么点击播放 暂停 终止的 这里我们一起讲：
代码：
html代码
<div class="mapTool">
<div class="playButton fix" id="playDiv" style="">
<i class="playBtn" id="playBtn" title="播放"></i>
<i class="playMonment" id="pauseBtn" title="暂停"></i>
<i class="playStop" id="stopBtn" title="停止"></i>
</div>
</div>
js方法：
$("#playBtn").on("click", startPlay); //给id写点击事件
$("#pauseBtn").on("click", pausePlay);
$("#stopBtn").on("click", stopPlay);
//开始播放
function startPlay(){
$("#playBtn").addClass("playBtnNow");
$("#pauseBtn").removeClass("playMonmentNow");
$("#stopBtn").removeClass("playStopNow");
playTrack();//绘制播放点
};
function pausePlay() {
$("#playBtn").removeClass("playBtnNow");
$("#pauseBtn").addClass("playMonmentNow");
$("#stopBtn").removeClass("playStopNow");
clearPalyTimer();
};
//停止播放
function stopPlay() {
$("#playBtn").removeClass("playBtnNow");
$("#pauseBtn").removeClass("playMonmentNow");
$("#stopBtn").addClass("playStopNow");
if (oPlayMarker != null) { //如果播放时的点不为空的话
map.removeOverlay(oPlayMarker);//将播放点从地图上移除
oPlayMarker = null; //将播放点设空
}
clearPalyTimer();
iPlayRowNum = 0;
};
三个方法：
playTrack();//绘制播放点
clearPalyTimer();
stopPlay() ；
function playTrack() {
//绘制播放点
if (oPlayMarker != null) {
map.removeOverlay(oPlayMarker);
oPlayMarker = null;
}
if (aTableDatas_gps == null||aTableDatas_gps=="") { //如果播放时的点不为空的话
alert("没有路线不能点击播放");
return false;
}
var aPlayDatas = [];
aPlayDatas = aTableDatas_gps.concat();
var tLastLon = aPlayDatas[iPlayRowNum].Longitude;
var tLastLat = aPlayDatas[iPlayRowNum].Latitude;
//console.log(tLastLon,tLastLat); //打印出走的经纬度
var oLL02 = LL84To02(tLastLon, tLastLat);
var vMPoint = createLngLatObj(tLastLon, tLastLat, oLL02.lon, oLL02.lat);
oPlayMarker = map.createMarker(vMPoint, {
icon: "../image/loCar.png",
width: 22,
height: 31,
offsetType: 1
});
map.addOverlay(oPlayMarker);
//置位地图中心点
var bdBounds = map.getViewBounds();
if (!map.IsLLObjInBounds(vMPoint, bdBounds)) {
map.setMapCenter(vMPoint);
}
clearPalyTimer();
//间隔时间继续播放
if (iPlayRowNum < aPlayDatas.length - 1) {
iPlayRowNum++;
oPlayTimer = setTimeout(playTrack, 50);
}
else {
//jAlert(GetString("Label_PlaybackComplete"));
$("#playBtn").removeClass("playBtnNow");
if (oPlayMarker != null) {
map.removeOverlay(oPlayMarker);
oPlayMarker = null;
}
clearPalyTimer();
iPlayRowNum = 0;
}
};
//重置播放时间
function clearPalyTimer() {
if (oPlayTimer != null) {
clearTimeout(oPlayTimer);
oPlayTimer = null;
}
};
这个效果图是动态的 所以就不放效果图了。
这就是公司用到的基本的标点 画线 播放暂停终止功能
附带的一些小方法：
/*
* 获取页面高度和宽度
* return Array
*/
function GetPageSize() {
try {
var xScroll; //页面滚动宽度
var yScroll; //页面滚动高度
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
}
else if (document.body.scrollHeight > document.body.offsetHeight) {
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
}
else {
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth; //屏幕宽度
var windowHeight; //屏幕高度
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
}
else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
/*当页面滚动高度比屏幕高度小的时候，页面高度为屏幕高度，反之，为页面滚动高度*/
if (yScroll < windowHeight) {
pageHeight = windowHeight;
}
else {
pageHeight = yScroll;
}
/*当页面滚动宽度比屏幕宽度小的时候，页面宽度为屏幕宽度，反之，为页面滚动宽度*/
if (xScroll < windowWidth) {
pageWidth = windowWidth;
}
else {
pageWidth = xScroll;
}
arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
return arrayPageSize;
}
catch (ex) {
catchTheException("GetPageSize", ex);
}
};
还有不懂的可以加我问一下 可能我讲的也不是很详细