学步园

下面是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;
			}
		}
	}
}