百度地图API 快速上手实例 ！！！

今天又来了一个新需求 ， 就是点击某人头出现一张地图， 在地图上标注此人出现的位置，

听起来很难的一个需求 ， 之前也没有接触过类似的应用 ， 

好吧， 最后使用了百度的一个开源的地图API ， 

下面话不多说， 还是直接上代码吧 ，  

如上图， 需求就是点击查看地图的时候， 出现一个地图标明当前用户的位置 ，  

接下来就介绍百度地图API的用法吧，

当然既然借助别人的API 那么引入就少不了了 。 

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

在这里你的密钥就是你要去官网去申请 一个密钥  ， 

	$('.lock').live('click',function(){  // lock就个类就是我所有查看地图的元素，
		var x = $(this).attr('x'); // X ，代表经度， 是后台返过来的， 我把它存在当前无素上 
		var y = $(this).attr('y'); //同上
		var name = $(this).attr('name'); //同上
		var prov = $(this).attr('prov') // 同上
		var padL = ($('.cBody').width() - $('.map').width())/2 + 'px';
		$('.mapBox').show();  //  这个是我装地图的窗口 ， 之前就已经把它扔在页面里了， 当然你们也可以动态创建
		loadMap(x,y,prov,name)  // 运行下面加载地图的那个方法  
	})
	$('.mask').bind('click',function(){  //  .mask 是我的一个遮罩， 当点击遮罩， 装地图的整个窗口隐藏
		$(this).parent().hide();
	})
	loadMap = function(x,y,prov,name){ // 加载地图  x,y,prov,name  四个参数分别为上面定义好的所需参数（经度X，玮度Y 为必须）
		var map = new BMap.Map("map");  // NEW一个地图实例 
		var point = new BMap.Point(x,y); //  传入坐标为地图的中心点
		var marker = new BMap.Marker(point);  // 创建标注
		map.addOverlay(marker);              // 将标注添加到地图中
		map.centerAndZoom(point, 15);
		map.enableScrollWheelZoom();   //启用滚轮放大缩小
		map.enableContinuousZoom();    //启用地图惯性拖拽
		var opts = {
		  width : 100,     // 信息窗口宽度
		  height: 50,     // 信息窗口高度
		  title : "用户 : " +name  ,// 信息窗口标题
		  enableMessage : false
		}
		var infoWindow = new BMap.InfoWindow("所在城市：" + prov , opts);  // 创建信息窗口对象        
			map.openInfoWindow(infoWindow,point); //开启信息窗口

	}

　　

好了，， 代码就写到这里了 ， 最后大家一起来看看最终效果吧，  

简单吧， 还不自己动手去试试 ！！！