js使用百度地图服务

最近做的一个项目中，需要用js调用百度地图服务，为了以后方便，写下经验。

百度地图服务是一个开放式的服务，其API首页地址是 http://developer.baidu.com/map/index.php?title=首页，其地图API示例地址

是 http://developer.baidu.com/map/jsdemo.htm#a1_2。

首先需要引入百度地图API：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=申请的密钥"></script>

上面的引入在Jquery中load加载时会出现跨域或BMap未定义的问题，因此可以使用异步加载如下：

function synLoad() {
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = "http://api.map.baidu.com/api?v=2.0&ak=申请的密钥&callback=初始化地图的回调函数";
	document.body.appendChild(script);
}

创建Map对象，并初始化地图

var pointArray = new Array();//坐标点数组
var arrows = new Array();//箭头数组
var polyline;//线对象
var map;//地图对象

function loadMap() {
<span style="white-space:pre">	</span>map = new BMap.Map("map-container"); // 创建Map实例
<span style="white-space:pre">	</span>var gc = new BMap.Geocoder();// 地址解析类
<span style="white-space:pre">	</span>var point = new BMap.Point(116.404, 39.915); // 创建点坐标
<span style="white-space:pre">	</span>map.centerAndZoom(point, 15);
<span style="white-space:pre">	</span>map.enableScrollWheelZoom(); // 启用滚轮放大缩小
<span style="white-space:pre">	</span>map.addControl(new BMap.NavigationControl()); // 左上角控件
<span style="white-space:pre">	</span>createMarker(map,gc);
<span style="white-space:pre">	</span>$('#oldTrack').click(function() {
<span style="white-space:pre">		</span>for(var i=0;i<arrows.length;i++) {
    <span style="white-space:pre">		</span>map.removeOverlay(arrows[i]);
    <span style="white-space:pre">	</span>}
<span style="white-space:pre">		</span>map.removeOverlay(polyline);
<span style="white-space:pre">		</span>drawTrack(pointArray,map);
<span style="white-space:pre">	</span>});
}

创建标注，并添加拖拽和点击事件

function createMarker(map, gc) {
	var json_data = [[116.404,39.915],[116.383752,39.91334],[116.384502,39.932241]];
	for(var i=0;i<json_data.length;i++){
		var marker = new BMap.Marker(new BMap.Point(json_data[i][0], json_data[i][1])); // 创建点
		map.addOverlay(marker);    // 增加点
		marker.enableDragging(); // 可拖拽
		pointArray[i] = new BMap.Point(json_data[i][0], json_data[i][1]);
		var label = new BMap.Label("<button class='btn btn-danger' style='height:22px;padding:0 0;font-size:10px;'>陈光标</button>",{offset:new BMap.Size(-15,-24)});
		label.setStyle({
			border: '0px'
		});
		marker.setLabel(label);
		marker.addEventListener("dragend", function(e) {
				// 获取地址信息
				gc.getLocation(e.point, function(rs) {
				showLocationInfo(e.target, rs, map);
			});
		});
		marker.addEventListener("click", function(e){
				// 添加标记点击监听
				gc.getLocation(e.point, function(rs){
				showLocationInfo(e.target, rs, map);
			});  
		});
	}
	// 让所有点在视野范围内
	map.setViewport(pointArray);
	// var point = new BMap.Point(104.083, 30.686);
	// map.centerAndZoom(point, 12);
	// var marker = new BMap.Marker(point);// 创建标注
	// map.addOverlay(marker); // 将标注添加到地图中
	// marker.enableDragging(); // 可拖拽
}

地图信息窗口的显示

function showLocationInfo(target,rs,map) {
	var opts = {
		width : 200, // 信息窗口宽度
		height : 90, // 信息窗口高度
		title : "" // 信息窗口标题
	}

	var addComp = rs.addressComponents;
	var addr = "姓名：陈光标<br/>"+"手机号码：15166781535<br/>"+"当前位置：" + addComp.province + ", " + addComp.city + ", "
			+ addComp.district + ", " + addComp.street + ", "
			+ addComp.streetNumber + "<br/>" + "定位时间：" + new Date().format("yyyy-MM-dd");
	var infoWindow = new BMap.InfoWindow(addr, opts); // 创建信息窗口对象
	var pt = new BMap.Point(target.getPosition().lng, target.getPosition().lat);
	map.openInfoWindow(infoWindow,pt);
}

根据坐标集在地图上画轨迹

function drawTrack(points,bMap) {
	if (points==null || points.length<=1) {  
        return;  
    }
	polyline = new BMap.Polyline(points, { 
        strokeColor : "blue",  
        strokeWeight : 3,  
        strokeOpacity : 0.5  
    });
    bMap.addOverlay(polyline); // 画线
    addArrow(polyline,15,20);//画箭头
    bMap.addEventListener("zoomend",function(e) {
    	for(var i=0;i<arrows.length;i++) {
    		bMap.removeOverlay(arrows[i]);
    	}
    	addArrow(polyline,15,20);
    });
}

在轨迹上添加箭头标志

//polyline轨迹线对象
//length箭头边长度
//angleValue箭头夹角度数
function addArrow(polyline,length,angleValue) {
	var linePoint=polyline.getPath();// 线的坐标串
	var arrowCount=linePoint.length;  
	for(var i =1;i<arrowCount;i++){ // 在拐点处绘制箭头
		var pixelStart=map.pointToPixel(linePoint[i-1]);  
		var pixelEnd=map.pointToPixel(linePoint[i]);  
		var angle = angleValue * Math.PI/180;// 箭头和主线的夹角
		var r=length; // r/Math.sin(angle)代表箭头长度
		var delta=0; // 主线斜率，垂直时无斜率
		var param=0; // 代码简洁考虑
		var pixelTemX,pixelTemY;// 临时点坐标
		var pixelX,pixelY,pixelX1,pixelY1;// 箭头两个点
		if(pixelEnd.x-pixelStart.x==0){ // 斜率不存在是时
		    pixelTemX=pixelEnd.x;  
		    if(pixelEnd.y>pixelStart.y){  
		    	pixelTemY=pixelEnd.y-r;  
		    }else{  
		    	pixelTemY=pixelEnd.y+r;  
		    }     
		    // 已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法
		    pixelX=pixelTemX-Math.round(r*Math.tan(angle));   
		    pixelX1=pixelTemX+Math.round(r*Math.tan(angle));  
		    pixelY=pixelY1=pixelTemY;  
		}else{ // 斜率存在时
		    delta=(pixelEnd.y-pixelStart.y)/(pixelEnd.x-pixelStart.x);  
		    param=Math.sqrt(delta*delta+1);  
		  
		    if((pixelEnd.x-pixelStart.x)<0){ // 第二、三象限
			    pixelTemX=pixelEnd.x+ r/param;  
			    pixelTemY=pixelEnd.y+delta*r/param;  
		    }  
		    else {// 第一、四象限
			    pixelTemX=pixelEnd.x- r/param;
			    pixelTemY=pixelEnd.y-delta*r/param;  
		    }  
		    // 已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法
		    pixelX=pixelTemX+ Math.round(Math.tan(angle)*r*delta/param);  
		    pixelY=pixelTemY-Math.round(Math.tan(angle)*r/param);  
		  
		    pixelX1=pixelTemX- Math.round(Math.tan(angle)*r*delta/param);  
		    pixelY1=pixelTemY+Math.round(Math.tan(angle)*r/param);
		}
		var pointArrow=map.pixelToPoint(new BMap.Pixel(pixelX,pixelY));  
		var pointArrow1=map.pixelToPoint(new BMap.Pixel(pixelX1,pixelY1));  
		var Arrow = new BMap.Polyline([  
		    pointArrow,  
		 linePoint[i],  
		    pointArrow1  
		], {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});
		arrows.push(Arrow);
		map.addOverlay(Arrow);
	}
}