[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 }

好了，差不多就这样吧，下一篇再继续深入。。

以上全部都属个人原创，请大家转载的时候附上原创链接： http://www.cnblogs.com/tonylp

posted on 2013-01-06 16:56 tony_lp 阅读(2243) 评论(8) 编辑收藏举报