首先說一點廢話：
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