信息后台[tonyLp]百度地图API开发实践（1）

最新推荐文章于 2018-12-26 21:41:57 发布

原创最新推荐文章于 2018-12-26 21:41:57 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一次使用百度地图API的实际项目经验，包括如何初始化地图、添加标记点、获取标记点信息及显示信息窗口等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文是一篇关于信息后台的帖子

首先说一点话废：

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

文章结束给大家分享下程序员的一些笑话语录： IBM和波音777
　　波音777是有史以来第一架完全在电脑虚拟现实中设计制造的飞机，所用的设备完全由IBM公司所提供。试飞前，波音公司的总裁非常热情的邀请IBM的技术主管去参加试飞，可那位主管却说道:“啊，非常荣幸，可惜那天是我妻子的生日，So..”..
　　波音公司的总载一听就生气了:“胆小鬼，我还没告诉你试飞的日期呢!”