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

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

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

好吧, 最后使用了百度的一个开源的地图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); //开启信息窗口

	}

  

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

 

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

 

简单吧, 还不自己动手去试试 !!!

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

上一篇:Kafka数据清洗ETL


下一篇:MVC4 WebAPI中如何返回一张图片