下面是Javascript的东西,是重头戏。其实我想放到网站上的,现在还在找一些方便的平台提供简单的网页访问功能。
初始化地图函数:
function InitMap()
{
var StartMarker;
var EndMarker;
var DistanceMode;
var map = new BMap.Map("l-map"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.4035,39.915), 12); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableAutoResize();
AddMarkerFunction=function(e){addMarker(e,map);}
SetRouter=function(e){SearchRouter(e,map);}
map.addEventListener("click",AddMarkerFunction)
//map.removeEventListener("click", AddMarkerFunction);
//map.addEventListener("click",addMarker(map));
InitRightClick(map);//初始化右键菜单
SearchCity=function(e){SearchCityInChinese(e,map);}
var CityButton=document.getElementById("CityButton");
CityButton.addEventListener("click",SearchCity);
}
InitMap()主要是实现初始化控件,和初始化一些事件响应函数。
初始化右键的函数:
function InitRightClick(map)
{
var contextMenu = new BMap.ContextMenu();
var txtMenuItem = [
{
text:'放大',
callback:function(){map.zoomIn()}
},
{
text:'缩小',
callback:function(){map.zoomOut()}
},
{
text:'打开测距模式',
callback:function()
{
DistanceMode = new BMapLib.DistanceTool(map);
DistanceMode.open();
}
},
{
text:'关闭测距模式',
callback:function()
{
//var myDis = new BMapLib.DistanceTool(map);
DistanceMode.close(); //关闭鼠标测距大
}
},
{
text:"设定路径",
callback:function()
{
ClickCount=0;
map.removeEventListener("click", AddMarkerFunction);
map.addEventListener("click", SetRouter);
}
}
];
for(var i=0; i < txtMenuItem.length; i++)
{
contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
if(i==1 || i==3)
{
contextMenu.addSeparator();
}
}
map.addContextMenu(contextMenu);
}
在地图上添加图标的函数,从表单接收输入信息:
function addMarker(e,map)//addMarker(e,map)
{
//var thisValue=document.getElementById("SelectMarker").value;
var thisValue=GetRadioValue("ico");
var marker;
var icon;
var circle;
//alert(thisValue);
if(thisValue==0)
{
}
else if(thisValue==1)
{
marker=new BMap.Marker(e.point);
map.addOverlay(marker);
}
else if(thisValue==2)
{
icon=new BMap.Icon("./image/man.png",new BMap.Size(24,24),{anchor:new BMap.Size(12,24)});
marker=new BMap.Marker(e.point,{icon:icon});
map.addOverlay(marker);
}
else if(thisValue==3)
{
dir=document.getElementsByName("CarDir")[0].value;
if(dir==0)
{
icon=new BMap.Icon("./image/car_right.png",new BMap.Size(24,24),{anchor:new BMap.Size(12,24)});
}
else if(dir==1)
{
icon=new BMap.Icon("./image/car_left.png",new BMap.Size(24,24),{anchor:new BMap.Size(12,24)});
}
//alert(dir);
marker=new BMap.Marker(e.point,{icon:icon});
map.addOverlay(marker);
var CircleValue=document.getElementsByName("CarRange")[0];
circle=new BMap.Circle(e.point,CircleValue.value);
map.addOverlay(circle);
marker.addEventListener("dragging", function(event){circle.setCenter(event.point);});
}
else if(thisValue==4)
{
var Wifi=document.getElementsByName("BaseRange")[0];
//var WifiValue=Wifi.Value;
//alert(Wifi.value);
icon=new BMap.Icon("./image/wifi.png",new BMap.Size(24,24),{anchor:new BMap.Size(12,24)});
marker=new BMap.Marker(e.point,{icon:icon});
circle = new BMap.Circle(e.point,Wifi.value);
map.addOverlay(marker);
map.addOverlay(circle);
}
else if(thisValue==5)
{
iconRed=new BMap.Icon("./image/traffic_red.png",new BMap.Size(24,24),{anchor:new BMap.Size(12,24)});
iconGreen=new BMap.Icon("./image/traffic_green.png",new BMap.Size(24,24),{anchor:new BMap.Size(12,24)});
iconYellow=new BMap.Icon("./image/traffic_yellow.png",new BMap.Size(24,24),{anchor:new BMap.Size(12,24)});
marker=new BMap.Marker(e.point,{icon:iconRed});
map.addOverlay(marker);
/*
var opts =
{
width : 20, // 信息窗口宽度
height: 20, // 信息窗口高度
title : "红绿灯" // 信息窗口标题
}
*/
//var infoWindow = new BMap.InfoWindow("lng:"+e.point.lng, opts); // 创建信息窗口对象
//map.openInfoWindow(infoWindow,e.point); //开启信息窗口
var i=0;
var Solution;
var RedTime=2;
var YellowTime=2;
var GreenTime=2;
//var infoWindow = new BMap.InfoWindow("Green:"+i, opts); // 创建信息窗口对象
//map.openInfoWindow(infoWindow,e.point); //开启信息窗口
function ShowTime(i)
{
Solution=document.getElementById("LightSolution").value;
if(Solution==0)
{
RedTime=5;
YellowTime=2;
GreenTime=5;
}
else if(Solution==1)
{
RedTime=15;
YellowTime=5;
GreenTime=15;
}
else if(Solution==2)
{
RedTime=30;
YellowTime=5;
GreenTime=30;
}
else if(Solution==3)
{
RedTime=30;
YellowTime=5;
GreenTime=30;
}
else if(Solution=4)
{
RedTime=30;
YellowTime=5;
GreenTime=10;
}
//document.getElementById("RedLight").value=i;
if(i==1)
{
//alert(GreenTime);
marker.setIcon(iconGreen);
//document.getElementById("inf").value="Green";
//infoWindow.setContent("Green:"+i);
//String1="Green"+i;
}
else if(i==GreenTime+1)
{
marker.setIcon(iconYellow);
//document.getElementById("inf").value="Yellow";
//infoWindow.setContent("Yellow:"+i);
//String1="Yellow"+(i-5);
}
else if(i==GreenTime+YellowTime+1)
{
marker.setIcon(iconRed);
//document.getElementById("inf").value="Red";
//infoWindow.setContent("Red:"+i);
//String1="Red"+(i-10);
}
i=i%(GreenTime+YellowTime+RedTime);
//infoWindow.setContent(String1);
setTimeout(function(){i++;ShowTime(i);},1000);
}
setTimeout(function(){ShowTime(0)},1000);
}
else if(thisValue==6)
{
icon=new BMap.Icon("./image/accident.png",new BMap.Size(24,24),{anchor:new BMap.Size(12,24)});
marker=new BMap.Marker(e.point,{icon:icon});
map.addOverlay(marker);
}
marker.enableDragging();
circle.enableDragging();
}
增加的寻路功能:
开启寻路功能之后,在地图上点第一下获取起点坐标,再点一下获取终点坐标,最后通过百度API查询路径,路径应该是没有实时路况信息的,只是一条建议的路径,其实应该有多条路径的信息的,我只是用第一条,然后通过设定定时器遍历每个点的信息,设置坐标的位置。
function SearchRouter(e,map)
{
var AfterTime;//after A min ,obj position
var TotalTime;
var CarPos;
var CarSpeed;
if(ClickCount%2==0)
{
StartPoint=e.point;
document.getElementById("Stalng").value=e.point.lng;
document.getElementById("Stalat").value=e.point.lat;
//alert(StartPoint.lng);
}
else if(ClickCount%2==1)
{
EndPoint=e.point;
document.getElementById("Endlng").value=e.point.lng;
document.getElementById("Endlat").value=e.point.lat;
CarSpeed=document.getElementById("CarSpeed").value;
if(CarSpeed<=0)
{
CarSpeed=100;
}
//alert(EndPoint.lng);
var myIcon = new BMap.Icon("./image/car2.png", new BMap.Size(49,32 ), { //小车图片
//offset: new BMap.Size(0, -5), //相当于CSS精灵
imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
});
var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true,enableDragging : true}});
driving.search(StartPoint, EndPoint);
driving.setSearchCompleteCallback(function()
{
var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例,获得一系列点的数组
var paths = pts.length; //获得有几个点
TotalTime=driving.getResults().getPlan(0).getDuration(false);
AfterTime=document.getElementById("AfterTime").value;
CarPos=Math.ceil(AfterTime*paths/(TotalTime/60));
//alert(CarPos);
//marker=new BMap.Marker(pts[CarPos]);
//map.addOverlay(marker);
if(CarPos<paths&&CarPos>0)
{
//alert(paths);
var icon=new BMap.Icon("./image/star.png",new BMap.Size(32,32),{anchor:new BMap.Size(16,16)});
//var marker=new BMap.Marker(pts[CarPos],{icon:icon});
//alert(pts[CarPos].lng);
var marker=new BMap.Marker(pts[CarPos],{icon:icon});
//map.clearOverlays(marker);
map.addOverlay(marker);
marker.enableDragging();
//marker.setAnimation();
}
//TotalTime=1;
//alert(TotalTime);
//TotalTime=Result.getPlan(0).getDuration(true);
var carMk = new BMap.Marker(pts[0],{icon:myIcon});
carMk.enableDragging();
//map.clearOverlays(carMk);
map.addOverlay(carMk);
i=0;
function resetMkPoint(i)
{
carMk.setPosition(pts[i]);
if(i < paths)
{
setTimeout(function(){i++;resetMkPoint(i);},CarSpeed);
}
else
{
var Visable=document.getElementById("LineVisable").value;
if(Visable==1)//路径消失
{
map.clearOverlays(carMk);
map.clearOverlays(marker);
}
}
}
setTimeout(function(){resetMkPoint(5);},100);
});
//TotalTime=driving.getResults().getPlan(0).getDuration(false);
//alert(AfterTime);
//alert(TotalTime);
//alert(paths);
//alert(CarPos);
map.removeEventListener("click", SetRouter);
map.addEventListener("click", AddMarkerFunction);
}
ClickCount++;
}
全部代码在这里:
// JavaScript Document
var AddMarkerFunction;
var SetRouter;
var StartPoint;
var EndPoint;
var ClickCount;
var SearchCity;
function InitMap()
{
var StartMarker;
var EndMarker;
var DistanceMode;
var map = new BMap.Map("l-map"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.4035,39.915), 12); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableAutoResize();
AddMarkerFunction=function(e){addMarker(e,map);}
SetRouter=function(e){SearchRouter(e,map);}
map.addEventListener("click",AddMarkerFunction)
//map.removeEventListener("click", AddMarkerFunction);
//map.addEventListener("click",addMarker(map));
InitRightClick(map);//初始化右键菜单
SearchCity=function(e){SearchCityInChinese(e,map);}
var CityButton=document.getElementById("CityButton");
CityButton.addEventListener("click",SearchCity);
}
function InitRightClick(map)
{
var contextMenu = new BMap.ContextMenu();
var txtMenuItem = [
{
text:'放大',
callback:function(){map.zoomIn()}
},
{
text:'缩小',
callback:function(){map.zoomOut()}
},
{
text:'打开测距模式',
callback:function()
{
DistanceMode = new BMapLib.DistanceTool(map);
DistanceMode.open();
}
},
{
text:'关闭测距模式',
callback:function()
{
//var myDis = new BMapLib.DistanceTool(map);
DistanceMode.close(); //关闭鼠标测距大
}
},
{
text:"设定路径",
callback:function()
{
ClickCount=0;
map.removeEventListener("click", AddMarkerFunction);
map.addEventListener("click", SetRouter);
}
}
];
for(var i=0; i < txtMenuItem.length; i++)
{
contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text,txtMenuItem[i].callback,100));
if(i==1 || i==3)
{
contextMenu.addSeparator();
}
}
map.addContextMenu(contextMenu);
}
function addMarker(e,map)//addMarker(e,map)
{
//var thisValue=document.getElementById("SelectMarker").value;
var thisValue=GetRadioValue("ico");
var marker;
var icon;
var circle;
//alert(thisValue);
if(thisValue==0)
{
}
else if(thisValue==1)
{
marker=new BMap.Marker(e.point);
map.addOverlay(marker);
}
else if(thisValue==2)
{
icon=new BMap.Icon("./image/man.png",new BMap.Size(24,24),{anchor:new BMap.Size(12,24)});
marker=new BMap.Marker(e.point,{icon:icon});
map.addOverlay(marker);
}
else if(thisValue==3)
{
dir=document.getElementsByName("CarDir")[0].value;
if(dir==0)
{
icon=new BMap.Icon("./image/car_right.png",new BMap.Size(24,24),{anchor:new BMap.Size(12,24)});
}
else if(dir==1)
{
icon=new BMap.Icon("./image/car_left.png",new BMap.Size(24,24),{anchor:new BMap.Size(12,24)});
}
//alert(dir);
marker=new BMap.Marker(e.point,{icon:icon});
map.addOverlay(marker);
var CircleValue=document.getElementsByName("CarRange")[0];
circle=new BMap.Circle(e.point,CircleValue.value);
map.addOverlay(circle);
marker.addEventListener("dragging", function(event){circle.setCenter(event.point);});
}
else if(thisValue==4)
{
var Wifi=document.getElementsByName("BaseRange")[0];
//var WifiValue=Wifi.Value;
//alert(Wifi.value);
icon=new BMap.Icon("./image/wifi.png",new BMap.Size(24,24),{anchor:new BMap.Size(12,24)});
marker=new BMap.Marker(e.point,{icon:icon});
circle = new BMap.Circle(e.point,Wifi.value);
map.addOverlay(marker);
map.addOverlay(circle);
}
else if(thisValue==5)
{
iconRed=new BMap.Icon("./image/traffic_red.png",new BMap.Size(24,24),{anchor:new BMap.Size(12,24)});
iconGreen=new BMap.Icon("./image/traffic_green.png",new BMap.Size(24,24),{anchor:new BMap.Size(12,24)});
iconYellow=new BMap.Icon("./image/traffic_yellow.png",new BMap.Size(24,24),{anchor:new BMap.Size(12,24)});
marker=new BMap.Marker(e.point,{icon:iconRed});
map.addOverlay(marker);
/*
var opts =
{
width : 20, // 信息窗口宽度
height: 20, // 信息窗口高度
title : "红绿灯" // 信息窗口标题
}
*/
//var infoWindow = new BMap.InfoWindow("lng:"+e.point.lng, opts); // 创建信息窗口对象
//map.openInfoWindow(infoWindow,e.point); //开启信息窗口
var i=0;
var Solution;
var RedTime=2;
var YellowTime=2;
var GreenTime=2;
//var infoWindow = new BMap.InfoWindow("Green:"+i, opts); // 创建信息窗口对象
//map.openInfoWindow(infoWindow,e.point); //开启信息窗口
function ShowTime(i)
{
Solution=document.getElementById("LightSolution").value;
if(Solution==0)
{
RedTime=5;
YellowTime=2;
GreenTime=5;
}
else if(Solution==1)
{
RedTime=15;
YellowTime=5;
GreenTime=15;
}
else if(Solution==2)
{
RedTime=30;
YellowTime=5;
GreenTime=30;
}
else if(Solution==3)
{
RedTime=30;
YellowTime=5;
GreenTime=30;
}
else if(Solution=4)
{
RedTime=30;
YellowTime=5;
GreenTime=10;
}
//document.getElementById("RedLight").value=i;
if(i==1)
{
//alert(GreenTime);
marker.setIcon(iconGreen);
//document.getElementById("inf").value="Green";
//infoWindow.setContent("Green:"+i);
//String1="Green"+i;
}
else if(i==GreenTime+1)
{
marker.setIcon(iconYellow);
//document.getElementById("inf").value="Yellow";
//infoWindow.setContent("Yellow:"+i);
//String1="Yellow"+(i-5);
}
else if(i==GreenTime+YellowTime+1)
{
marker.setIcon(iconRed);
//document.getElementById("inf").value="Red";
//infoWindow.setContent("Red:"+i);
//String1="Red"+(i-10);
}
i=i%(GreenTime+YellowTime+RedTime);
//infoWindow.setContent(String1);
setTimeout(function(){i++;ShowTime(i);},1000);
}
setTimeout(function(){ShowTime(0)},1000);
}
else if(thisValue==6)
{
icon=new BMap.Icon("./image/accident.png",new BMap.Size(24,24),{anchor:new BMap.Size(12,24)});
marker=new BMap.Marker(e.point,{icon:icon});
map.addOverlay(marker);
}
marker.enableDragging();
circle.enableDragging();
}
function SearchRouter(e,map)
{
var AfterTime;//after A min ,obj position
var TotalTime;
var CarPos;
var CarSpeed;
if(ClickCount%2==0)
{
StartPoint=e.point;
document.getElementById("Stalng").value=e.point.lng;
document.getElementById("Stalat").value=e.point.lat;
//alert(StartPoint.lng);
}
else if(ClickCount%2==1)
{
EndPoint=e.point;
document.getElementById("Endlng").value=e.point.lng;
document.getElementById("Endlat").value=e.point.lat;
CarSpeed=document.getElementById("CarSpeed").value;
if(CarSpeed<=0)
{
CarSpeed=100;
}
//alert(EndPoint.lng);
var myIcon = new BMap.Icon("./image/car2.png", new BMap.Size(49,32 ), { //小车图片
//offset: new BMap.Size(0, -5), //相当于CSS精灵
imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
});
var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true,enableDragging : true}});
driving.search(StartPoint, EndPoint);
driving.setSearchCompleteCallback(function()
{
var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例,获得一系列点的数组
var paths = pts.length; //获得有几个点
TotalTime=driving.getResults().getPlan(0).getDuration(false);
AfterTime=document.getElementById("AfterTime").value;
CarPos=Math.ceil(AfterTime*paths/(TotalTime/60));
//alert(CarPos);
//marker=new BMap.Marker(pts[CarPos]);
//map.addOverlay(marker);
if(CarPos<paths&&CarPos>0)
{
//alert(paths);
var icon=new BMap.Icon("./image/star.png",new BMap.Size(32,32),{anchor:new BMap.Size(16,16)});
//var marker=new BMap.Marker(pts[CarPos],{icon:icon});
//alert(pts[CarPos].lng);
var marker=new BMap.Marker(pts[CarPos],{icon:icon});
//map.clearOverlays(marker);
map.addOverlay(marker);
marker.enableDragging();
//marker.setAnimation();
}
//TotalTime=1;
//alert(TotalTime);
//TotalTime=Result.getPlan(0).getDuration(true);
var carMk = new BMap.Marker(pts[0],{icon:myIcon});
carMk.enableDragging();
//map.clearOverlays(carMk);
map.addOverlay(carMk);
i=0;
function resetMkPoint(i)
{
carMk.setPosition(pts[i]);
if(i < paths)
{
setTimeout(function(){i++;resetMkPoint(i);},CarSpeed);
}
else
{
var Visable=document.getElementById("LineVisable").value;
if(Visable==1)//路径消失
{
map.clearOverlays(carMk);
map.clearOverlays(marker);
}
}
}
setTimeout(function(){resetMkPoint(5);},100);
});
//TotalTime=driving.getResults().getPlan(0).getDuration(false);
//alert(AfterTime);
//alert(TotalTime);
//alert(paths);
//alert(CarPos);
map.removeEventListener("click", SetRouter);
map.addEventListener("click", AddMarkerFunction);
}
ClickCount++;
}
function SearchCityInChinese(e,map)
{
var CityName;
CityName=document.getElementById("City");
map.centerAndZoom(CityName.value,12);
}
function GetRadioValue(RadioName)
{
var obj;
obj=document.getElementsByName(RadioName);
if(obj!=null)
{
var i;
for(i=0;i<obj.length;i++)
{
if(obj[i].checked)
{
return obj[i].value;
}
}
}
}