今天又来了一个新需求 , 就是点击某人头出现一张地图, 在地图上标注此人出现的位置,
听起来很难的一个需求 , 之前也没有接触过类似的应用 ,
好吧, 最后使用了百度的一个开源的地图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); //开启信息窗口 }
好了,, 代码就写到这里了 , 最后大家一起来看看最终效果吧,
简单吧, 还不自己动手去试试 !!!