[tonyLp]百度地图API开发实践（1）
首先说一点废话：
1. 关于名字tonylp，其实从程序员的角度来说，我是喜欢写成tonyLp，采用骆驼法，但是不知道那时候为了什么，博客园的名字变成tony_lp，如果我没记错的话，这应该是c++里面的一种命名方法，欢迎拍砖哦，因为我实在记不清了。
2.我挺喜欢博客园的，这地方大牛好多，我也喜欢在这发随笔，但是总觉得转载来的东西，味道会怪怪的，所以力求所有发表的东西都是自己一个字一个字敲出来的，当然我没有任何鄙视那些转载别人文章的人的意思，毕竟通过转载，的却很方便让我欣赏到了好的文章。
3. 作为一个奋斗在web前端的小菜鸟，我很希望有些大牛能给我推荐一些JQuery，JavaScript，Html以及其他关于web前端的书，非常感谢。
好了，说说百度地图API开发实践，因为这段时间帮一个社团在做一个论坛项目，他们希望有一个地图，可以把一些新鲜事，帮助信息标记出来。现在基于地理位置的社交活动非常热，他们也是希望应用这个技术吧。
通过http://developer.baidu.com/map/上面查看一些javascript类参考，然后看看它的demo，就基本可以开始开发了，不难。
首先说说他们的目标（其实他们现在需求十分不明确，而我也只是作为了解尝试一下百度地图API，所以有些需求就是按照我的逻辑来的）：
1.当我点击链接打开这个页面的时候，我希望能自动定位到当前我的位置。
2. 查看当前地图范围内的所有标记点
3. 点击每个标记点，都会有相应大的信息窗口显示
4. 通过搜索，我可以找到一个位置，然后标记它，并写入相应的帮助信息（这里其实是很大的一个模块，需求还没太理清楚）
5.左边栏应该显示我多少距离之内的所有标记点，并提供相应的信息。
6.左边信息中应该有超链接（比方说在地图中显示），然后点击之后在地图中显示。
7.我可以设置搜索距离，即提示方圆多少之内的所有的帮助信息
现在能想到的就是这些需求，然后针对这些需求，我相应的程序设计思想：
1. 获取当前我的地址：1）通过IP获取粗略地position（统一经纬度），然后通过这个position初始化地图
2） 通过ajax向后台获取已经存储的地址信息（这个postion就比较随意了，可以记录上一次的position，也可以在用户注册的时候记录下来，具体还没想好）
2. 获取当前地图范围内的所有标记的点，通过向后台请求position信息，然后将点一个一个mark到地图上。这个时候得做一件额外的工作，为每个marker添加一个鼠标点击监听事件。
3. 比较当前点击的标记点和上一次点击的标记点是否一样，如果不一样，就向后台请求数据包括，title，content，img链接（因为想做一个类似于百度信息窗的东西）
其实我现在只是实现到这里，后面的改天再继续实现，下面附代码和截图，还是建议自己编，实在不是很有技术含量，看看范例基本就会了，还是多注意思想吧。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>百度地图</title> 6 <style type="text/css"> 7 body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} 8 #l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;} 9 #r-result{height:100%;width:20%;float:left;} 10 </style> 11 <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" /> 12 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script> 13 <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script> 14 <script type="text/javascript" src="jquery.js"></script> 15 <script type="text/javascript" src="demo.js"></script> 16 <script type="text/javascript"> 17 $(document).ready(function(){ 18 initMap(); 19 initInfoWindow(); 20 getMark(); 21 22 }); 23 </script> 24 </head> 25 <body> 26 <div id="allmap"></div> 27 </body> 28 </html>
1 //初始化map 2 function initMap(){ 3 var lng = 126.657717; 4 var lat = 45.773225; 5 var point = new BMap.Point(lng, lat); // 创建点坐标 6 /* $.ajax({ 7 url: 'XXX.action', //replace with the real action 8 type: 'get', 9 async: false, 10 datatype: 'json', 11 success: function(data){ 12 lng = data.lng; 13 lat = data.lat; 14 if(lng != null && lat != null){ 15 point = new BMap.Point(lng,lat); 16 } 17 } 18 }); 19 */ 20 map = new BMap.Map("allmap"); // 创建Map实例 21 map.centerAndZoom(point,14); // 初始化地图,设置中心点坐标和地图级别。 22 map.enableScrollWheelZoom(); //启用滚轮放大缩小 23 map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件 24 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 25 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件 26 }
//增加marker点 function addMarker(point){ var marker = new BMap.Marker(point); map.addOverlay(marker); marker.addEventListener("click", function(e){ getWindowInfo(marker.getPosition()); //获取marker的位置 searchInfoWindow.open(marker); //更新InfoWindow信息 }) }
1 /* 2 每当我点击一个marker时，都通过ajax，将所在的marker点向后台搜索， 3 得到title，content，图片，然后显示在infoWindow中。 4 实现步骤： 5 1.获取marker点坐标 6 2.通过ajax获得infowindow信息 7 3.显示在页面上 8 如何设置关闭，按照这种模式，是不是每次都需要后台请求数据呢， 9 解决办法，可以通过比较当前marker点和先前获取到的点的区别，如果相同， 10 就不像后台请求数据了。 11 增加info窗口 12 */ 13 function getWindowInfo(recPoint){ 14 if( !recPoint.equals(prePoint)){ 15 /* 16 $.ajax({ 17 url: 'xxx.action', 18 type: 'get', 19 async: false, 20 data: 'lng=' + recPoint.lng + '&lat='+recPoint.lat, 21 dataType: 'json', 22 success: function(data){ 23 if(data != null){ 24 var infoContent = data.infoContent; //还需要完善 25 var infoTitle = data.infoTitle; 26 var imgSrc = data.imgSrc; 27 28 var content = '<div style="margin:0;line-height:20px;padding:2px;">' + 29 '<img src="'+imgSrc+'" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' + 30 +infoContent+'</div>'; 31 searchInfoWindow.setTitle(infoTitle); 32 searchInfoWindow.setContent(content); 33 } 34 } 35 }); 36 */ 37 console.log(recPoint.lng); 38 } 39 else{ 40 // alert("else"+recPoint.lat); 41 } 42 prePoint = recPoint; 43 }
![[tonyLp]百度地图API开发实践（1）_第1张图片](http://img.e-com-net.com/image/product/52af329d179c4f45b5fed43a8cae185b.jpg)
好了， 差不多就这样吧，下一篇再继续深入。。
以上全部都属个人原创，请大家转载的时候附上原创链接： http://www.cnblogs.com/tonylp