首页 > 代码库 > 百度地图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 快速上手实例 ！！！
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。