js_baidumap_页面上添加节点,并将这些节点连成线路,查询线路信息

百度地图效果图:

主要实现方式:

                         引用百度api,依靠javascript实现。

baidumap.js

//模拟从南京到台北的线路
//南京:118.81,32.03
//常州:119.98,31.79
//无锡:120.35,31.54
//苏州:120.58,31.27
//上海:121.48,31.20
//杭州:120.16,30.27
//绍兴:120.59,29.99
//宁波:121.55,29.88
//台州:121.42,28.66
//温州:120.71,28.01
//福州:119.31,26.07
//台北:121.52,25.04
var RARTH_RADIUS = 6378137.0;//地球半径 单位M
var PI = Math.PI;

$(function(){
	//创建一个地址解析器实例
	var myGeo = new BMap.Geocoder();
	//获取所经过城市的数组
	var cityArray = createCityArray();
	//获取当前所在城市
	var curCity = new BMap.Point(121.42,28.66);
	//var point =  new BMap.Point(121.48,31.20);//创建一个坐标点
	//创建地图实例
	var map = createMap(curCity);
	//添加控件
	createControl(map);
	//获取点击点坐标
	//getPosition(map);
	//获得当前地图级别
	//getZoom(map);	
	//创建一个圆形覆盖物
	//createCircle(map,point,8000,"red","red");
	//绘线
	var disc = createAllLine(map,cityArray,curCity);
	//绘覆盖物
	createAllCircle(map,cityArray,curCity,disc,myGeo);
	//两个点之间划线
	//createLine(map,new BMap.Point(120.35,31.54),new BMap.Point(118.81,32.03),"red",6,1);
	//测试两点间的距离
	//alert(getDistance(new BMap.Point(120.35,31.54),new BMap.Point(120.58,31.27)));
});

//根据中心点坐标创建地图
function createMap(curCity){
	var map = new BMap.Map("container");//创建地图实例
	map.centerAndZoom(curCity,7);//初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom();  // 开启鼠标滚轮缩放  
	map.enableKeyboard();         // 开启键盘控制  
	map.enableContinuousZoom();   // 开启连续缩放效果  
	map.enableInertialDragging(); // 开启惯性拖拽效果 
	return map;
}

//向地图添加控件
function createControl(map){
	map.addControl(new BMap.NavigationControl({type:BMAP_NAVIGATION_CONTROL_LARGE})); //地图添加平移缩放控件  
	map.addControl(new BMap.ScaleControl());//比例尺控件  
	map.addControl(new BMap.OverviewMapControl());//缩略地图控件  
	map.addControl(new BMap.MapTypeControl());//地图类型控件  
}

//获取当前点击点的坐标
function getPosition(map){
	map.addEventListener("click",function(e){
		alert("经度:"+e.point.lng+",纬度:"+e.point.lat);
		
	});
}
//获取当前地图缩放级别
function getZoom(map){
	map.addEventListener("zoomend",function(){
		alert("地图缩放至:"+this.getZoom()+"级");
	});
}
//创建一个圆形覆盖物
function createCircle(map,point,radius,strColor,filColor){
	//需要为创建的圆形覆盖物设置颜色
	var myCircle = new BMap.Circle(point,radius,{strokeColor:strColor, fillColor:filColor,strokeOpacity:1,fillOpacity:1});
	map.addOverlay(myCircle);
	return myCircle;
}

//创建南京 常州 无锡 苏州 上海 五个站点的圆形覆盖物
function createAllCircle(map,cityArray,curCity,disc,myGeo){
	//
	for(var i=0;i<cityArray.length;i++){
		//从起点开始为站点添加默认覆盖物
		createCircle(map,cityArray[i],8000,"red","red");
		if((curCity.lng === cityArray[i].lng) && (curCity.lat === cityArray[i].lat)){
			var curCityCircle = createCircle(map,curCity,8000,"blue","blue");
			//为当前据点的圆形覆盖物添加点击事件
			alertInfo(map,curCityCircle,curCity,disc,myGeo);
			//为当前所在点之后的站点添加不同的颜色
			if(i == cityArray.length-1){
				return;
			}
			for(var j=i+1;j<cityArray.length;j++){
				createCircle(map,cityArray[j],8000,"silver","silver");
			}
			//执行完后，结束循环
			break;
		}
	}

	
}

//模拟创建所有城市,该数据应该从数据库中获取
function createCityArray(){
	var cityArray = new Array();
	cityArray.push(new BMap.Point(118.81,32.03));
	cityArray.push(new BMap.Point(119.98,31.79));
	cityArray.push(new BMap.Point(120.35,31.54));
	cityArray.push(new BMap.Point(120.58,31.27));
	cityArray.push(new BMap.Point(121.48,31.20));
	cityArray.push(new BMap.Point(120.16,30.27));
	cityArray.push(new BMap.Point(120.59,29.99));
	cityArray.push(new BMap.Point(121.55,29.88));
	cityArray.push(new BMap.Point(121.42,28.66));
	cityArray.push(new BMap.Point(120.71,28.01));
	cityArray.push(new BMap.Point(119.31,26.07));
	cityArray.push(new BMap.Point(121.52,25.04));
	return cityArray;
}
//为两两站点之间划线
function createLine(map,pointA,pointB,strColor,strWeight,strOpacity){
	var polyline = new BMap.Polyline([pointA,pointB],{strokeColor:strColor,strokeWeight:strWeight,strokeOpacity:strOpacity})
	map.addOverlay(polyline);
}
//为线路描线
function createAllLine(map, cityArray, curCity){
	var disc = 0;
	for(var i=0;i<cityArray.length;i++){
		if(i == cityArray.length-1){	
				return 0;
		}
		createLine(map,cityArray[i],cityArray[i+1],"red",2,1);
		if((curCity.lng === cityArray[i].lng) && (curCity.lat === cityArray[i].lat)){
			for(var j = i;j<cityArray.length-1;j++){
				//为两点绘线
				createLine(map,cityArray[j],cityArray[j+1],"silver",3,1);
				//测量两点间的距离
				disc += getDistance(cityArray[j],cityArray[j+1]);
				//alert(disc);
			}
			break;
		}
	}
	return disc;
}

//为当前据点添加点击事件
function alertInfo(map,curCityCircl,curCity,disc,myGeo){
	curCityCircl.addEventListener("click",function(e){
		//首先获取当前点的坐标
		var location = analyzeLongitude(e.point);
		//alert(location);
		//计算当前点到终点的距离
		//对距离信息进行处理
		var realDisc = analyzeDisc(disc);
		//alert("距离终点:"+disc.toFixed(2)+"公里");
		//获取当前点的城市名
		myGeo.getLocation(curCity,function(result){
			var address = result.addressComponents;
			//alert("所在地:"+address.city);
			//创建信息窗口对象
			var infoWindow = new BMap.InfoWindow(
				location+"<br/>"+
				realDisc+"<br/>"+
				"所在地:"+address.city
				,{width:200,height:90,title:"所在地信息"});
			map.openInfoWindow(infoWindow,curCity);
		});
		
	});
}
//经纬度解析
function analyzeLongitude(point){
	//解析经度
	var x = analyzeX(point.lng);
	//解析纬度
	var y = analyzeY(point.lat);
	return x+" , "+y;
}
//解析经度
function analyzeX(x){
	var newX = x.toFixed(2);
	if(x>0 && x<180){
		return "东经:"+newX;
	}else{
		return "西经:"+Math.abs(newX);
	}
}
//解析纬度
function analyzeY(y){
	var newY = y.toFixed(2);
	if(y>0 && y<180){
		return "北纬:"+newY;
	}else{
		return "南纬:"+Math.abs(newY);
	}
}

//
function getRad(d){
	return d*PI/180.0;
}

//获取地球上任意两点间的距离
function getDistance(pointA,pointB){
	
	if((pointA.lng === pointB.lng) && (pointA.lat == pointB.lat)){
		return 0;
	}
	var f = getRad((pointA.lat+pointB.lat)/2);
	var g = getRad((pointA.lat-pointB.lat)/2);
	var l = getRad((pointA.lng-pointB.lng)/2);
	
	var sg = Math.sin(g);
	var sl = Math.sin(l);
	var sf = Math.sin(f);
	
	var s,c,w,r,d,h1,h2;
	var a = RARTH_RADIUS;
	var f1 = 1/298.257;
	
	sg = sg*sg;
	sl = sl*sl;
	sf = sf*sf;
	
	s = sg*(1-sl) + (1-sf)*sl;
	c = (1-sg)*(1-sl) + sf*sl;

	w = Math.atan(Math.sqrt(s/c));
	r = Math.sqrt(s*c)/w;
	d = 2*w*a;
	h1 = (3*r - 1)/2/c;
	h2 = (3*r + 1)/2/s;
	
	return d*(1 + f1*(h1*sf*(1-sg) - h2*(1-sf)*sg))/1000;
}

//对距离信息进行处理
function analyzeDisc(disc){
	if(disc == 0){
		return "已到达目的地";
	}else{
		return "距离目的地还有"+disc.toFixed(2)+"公里";
	}
}

baidumap.css

#container{
	height:100%;
	width:100%;
}

baidumap.html

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--引用百度地图API-->
<link rel="stylesheet" type="text/css" href="baidumap.css" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4&services=true"></script>
<script type="text/javascript" src="../jquery-1.4.4.js"></script>
<script type="text/javascript" src="baidumap.js"></script>
</head>
<body>  
<h1>百度定位</h1>
 <!--百度地图容器-->
 <center>
  <div id="container">
   
  </div>
 </center>
</body>
</html>