百度地图 应用
基本功能需求都已經實現（自定義標注、精確和模糊查詢、個性化添加、右鍵菜單等），先貼出效果圖：上圖布局，最上面是測試通過的瀏覽器及其版本，左側是動態加載的數據源和查詢功能，右側則是調用BMap API實現自己的應用知識拓展：關于js和css的瀏覽器兼容性問題，請參見我在百度空間的博客 Javascript 和 CSS 的瀏覽器兼容總結設計思路：接口是BMap API，內部功能采用模塊化設計，搜索模塊、自定義添加、右鍵菜單事件等，這樣設計方便擴展和維護，后期將考慮加入谷歌的GMap下面，詳細介紹內部功能是如何設計和實現的1、數據源格式數據源格式是比較規整的，具體格式如下：源碼copy to clipboard打印？
01.var data = [
02. { id: 100, point: "116.397128|39.916527", addr: "紫金天子城", mainFlow: 3, subFlow: 169.9, press: 4, voltage: 13.3, flashFlow: 1, isEle: "有市電", time: "2011-7-13 16:30:00" },
03. { id: 101, point: "116.422792|40.009471", addr: "十里村", mainFlow: 3, subFlow: 169.9, press: 4, voltage: 13.3, flashFlow: 1, isEle: "有市電", time: "2011-7-13 16:30:00" },
04. { id: 202, point: "116.484289|39.97936", addr: "楊家大灣", mainFlow: 13, subFlow: 19.9, press: 14, voltage: 13.3, flashFlow: 1, isEle: "有市電", time: "2011-7-13 16:30:00" },
05. { id: 303, point: "116.454494|39.964011", addr: "趙鵬", mainFlow: 3, subFlow: 69.9, press: 4, voltage: 13.3, flashFlow: 1, isEle: "有市電", time: "2011-7-13 16:30:00" },
06. { id: 404, point: "116.394601|39.987925", addr: "王店", mainFlow: 3, subFlow: 169.9, press: 4, voltage: 13.3, flashFlow: 1, isEle: "有市電", time: "2011-7-13 16:30:00" },
07. { id: 500, point: "116.469899|39.87684", addr: "劉村", mainFlow: 3, subFlow: 169.9, press: 4, voltage: 13.3, flashFlow: 1, isEle: "有市電", time: "2011-7-13 16:30:00" },
08. { id: 501, point: "116.331292|39.949031", addr: "西子營", mainFlow: 3, subFlow: 169.9, press: 4, voltage: 13.3, flashFlow: 1, isEle: "有市電", time: "2011-7-13 16:30:00" },
09. { id: 602, point: "116.374561|39.894302", addr: "馬甲鎮", mainFlow: 13, subFlow: 19.9, press: 14, voltage: 13.3, flashFlow: 1, isEle: "有市電", time: "2011-7-13 16:30:00" },
10. { id: 703, point: "116.419527|39.945374", addr: "大牛集市", mainFlow: 3, subFlow: 69.9, press: 4, voltage: 13.3, flashFlow: 1, isEle: "有市電", time: "2011-7-13 16:30:00" },
11. { id: 804, point: "116.394601|39.987925", addr: "小牛峽灣", mainFlow: 3, subFlow: 169.9, press: 4, voltage: 13.3, flashFlow: 1, isEle: "有市電", time: "2011-7-13 16:30:00" },
12. { id: 905, point: "116.368099|39.942332", addr: "徐家水庫", mainFlow: 3, subFlow: 169.9, press: 4, voltage: 13.3, flashFlow: 1, isEle: "有市電", time: "2011-7-13 16:30:00" }
13. ]; 目前數據源采用的text文本格式進行存儲與加載，隨著需求和應用的擴大，后期將會使用MySQL數據庫進行保存與提取2、動態加載數據源（左側table）源碼copy to clipboard打印？
01.function init_MiddleLeft() {
02. var top_div = document.getElementById("id_middle_left");
03.
04. var table = document.createElement("table");
05. table.setAttribute("border", 1);
06. table.setAttribute("width", 280);
07. for (var i = 0; i < data.length; i++) {
08. var tr = document.createElement("tr");
09.
10. var td = document.createElement("td");
11. var str = data[i].id;
12. var msg = document.createTextNode(str);
13. td.appendChild(msg);
14. tr.appendChild(td);
15.
16. td = document.createElement("td");
17. str = data[i].addr;
18. msg = document.createTextNode(str);
19. td.appendChild(msg);
20. tr.appendChild(td);
21.
22. td = document.createElement("td");
23. var img = document.createElement("img");
24. img.src = "./info.gif";
25. img.value = this.data[i];
26. img.onclick = function(){return click(this)}; // img.οnclick=Function("click(this.value)");
27.
28. td.appendChild(img);
29. tr.appendChild(td);
30.
31. table.appendChild(tr);
32. }
33.
34.
35. top_div.appendChild(table);
36. } 左側動態加載數據源效果圖：3、精準與模糊查詢（正則式實現）源碼copy to clipboard打印？
01.// search類原型
02.function searchClass(data) {
03. this.datas = data;
04.}
05.
06.// 設置數據源
07.searchClass.prototype.setData = function (data) {
08. this.datas = data;
09.}
10.
11.// 去掉字符串空格
12.searchClass.prototype.trim = function (str) {
13. if (null == str) {
14. str = "";
15. } else {
16. str = str.toString();
17. }
18.
19. return str.replace(/(^[\s\t\xa0\u3000]+)|([\u3000\xa0\s\t]+$)/g, "");
20.}
21.
22.// search原型查詢模塊
23.// rule = {id: "id", key: "keyword", query: "single|more", show: "one|all"}
24.searchClass.prototype.search = function (rule) {
25. if (null == this.datas) {
26. alert("數據源不存在!");
27. return false;
28. }
29.
30. if ("" == this.trim(rule) || "" == this.trim(rule.id) || "" == this.trim(rule.key) || "" == this.trim(rule.query)) {
31. alert("請指定要搜索內容!");
32. return false;
33. }
34.
35. var reval = []; // 返回值，object數組類型
36. var datas = this.datas; // search類，成員變量
37. me = this; // 全局this，getData中me
38.
39. // 添加查詢結果
40. var addData = function (data) {
41. reval.push(data);
42. }
43.
44. // 獲取查詢數據源串
45. var getData = function (data, id) {
46. var _id = me.trim(id);
47. var d = "data";
48. if (0 == _id.length) {
49. return data;
50. } else {
51. d += '["' + _id + '"]';
52. return eval(d);
53. }
54. }
55.
56. // 檢索遍歷
57. for (var i = 0; i < datas.length; i++) {
58. var data = datas[i];
59. var d = getData(data, rule.id);
60. var dReg = new RegExp(this.trim(rule.key));
61.
62. if ("one" == rule.show) { // 顯示查詢標記
63. if ("single" == rule.query && d == rule.key) { // 精準查詢(single)
64. addData(data);
65. } else if ("more" == rule.query && dReg.test(d)) { // 模糊查詢(正則式實現)
66. addData(data);
67. }
68. } else if ("all" == rule.show) { // 顯示全部標記
69. addData(data);
70. }
71. }
72.
73. // 返回結果
74. return reval;
75.} 4、標記查詢的結果源碼copy to clipboard打印？
01.// 標記查詢結果
02.window.addMarker = function (data_a) {
03. map.clearOverlays(); // 首先清理已有標記
04.
05. // 遍歷查詢結果數據(data_a)
06. for (var i = 0; i < data_a.length; i++) {
07. // 獲取坐標(經度、緯度),在地圖map上顯示
08. var px = data_a[i].point.split("|")[0];
09. var py = data_a[i].point.split("|")[1];
10.
11. var point = new BMap.Point(px, py);
12. var marker = new BMap.Marker(point);
13. map.addOverlay(marker);
14. //marker.enableDragging(true);
15.
16. // 生成標記信息(table)
17. var content = "<table>";
18. content = content + "<tr><td> 設備編號：" + data_a[i].id + "</td></tr>";
19. content = content + "<tr><td> 安裝地點：" + data_a[i].addr + "</td></tr>";
20. content = content + "<tr><td> 主表流量：" + data_a[i].mainFlow + "</td></tr>";
21. content = content + "<tr><td> 副表流量：" + data_a[i].subFlow + "</td></tr>";
22. content = content + "<tr><td> 管網壓力：" + data_a[i].press + "</td></tr>";
23. content = content + "<tr><td> 設備電壓：" + data_a[i].voltage + "</td></tr>";
24. content = content + "<tr><td> 瞬時流量：" + data_a[i].flashFlow + "</td></tr>";
25. content = content + "<tr><td> 有無市電：" + data_a[i].isEle + "</td></tr>";
26. content = content + "<tr><td> 記錄時間：" + data_a[i].time + "</td></tr>";
27. content += "</table>";
28.
29. // 捕獲標記點擊事件，并且顯示信息
30. // 函數閉包，總是執行
31. (function () {
32. var infoWindow = new BMap.InfoWindow(content);
33. marker.addEventListener("click", function () {
34. this.openInfoWindow(infoWindow);
35. });
36. })()
37. }
38.} 標記效果圖：5、右鍵菜單的實現源碼copy to clipboard打印？
01.// 添加右鍵菜單
02.var contextMenu = new BMap.ContextMenu();
03.var txtMenuItem = [
04. {
05. text: "放大",
06. callback: function () { map.zoomIn() }
07. },
08. {
09. text: "縮小",
10. callback: function () { map.zoomOut() }
11. },
12. {
13. text: '查看北京',
14. callback: function () { map.centerAndZoom("北京") }
15. },
16. {
17. text: '放置到最大',
18. callback: function () { map.zoomTo(18) }
19. },
20. {
21. text: '獲取改點坐標',
22. callback: function(p){
23. var px = p.lng;
24. var py = p.lat;
25. alert("該點坐標：\n經度：" + px + "; \n緯度：" + py);
26. }
27. },
28. {
29. text: '添加該店標注',
30. callback: function (p) {
31. var marker = new BMap.Marker(p), px = map.pointToPixel(p);
32. map.addOverlay(marker);
33. marker.enableDragging(true);
34. }
35. }
36.];
37.
38.// 遍歷菜單items，添加進菜單
39.for (var i = 0; i < txtMenuItem.length; i++) {
40. contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100));
41. if (i == 1 || i == 3) {
42. contextMenu.addSeparator();
43. }
44.}
45.map.addContextMenu(contextMenu); // 添加菜單到map 菜單效果圖：6、模糊查詢結果左側，輸入“1”，模糊匹配查詢和顯示查詢結果右側，輸出3個標記結果校驗：100、101、501三項，都含有查詢關鍵字"1“，查詢結果正確7、關注細節，改善體驗在實現過程中，也考慮了一些細節處理，這里舉兩個示例a、輸入框自動提示當用戶沒有輸入時，輸入框顯示提示信息"input id"，當用戶鼠標點擊后，提示信息自動清除（是不是很像AJAX的水印效果 哈哈）其實，其內部實現也不復雜，但不經意的設計，體現的卻是很人性化具體實現（onmousedown和onmouseout）源碼copy to clipboard打印？
01.<input type="text" name="keyword" id="id_keyword" value="input id" οnmοusedοwn="clearKeyword('keyword')"
02. οnmοuseοut="showKeyword('keyword')" /> 源碼copy to clipboard打印？
01.// 用戶按下鼠標，提示信息清除
02.function clearKeyword(keyword) {
03. var input = document.getElementsByName(keyword);
04. input[0].value = ""; // 清除提示
05.
06.}
07.
08.// 鼠標移走，如果內容為空，則重新提示
09.function showKeyword(keyword) {
10. var input = document.getElementsByName(keyword);
11. var value = input[0].value;
12. if ("" == value) { // 判斷是否為空
13. input[0].value = "input id";
14. }
15.} b、左側查詢高亮顯示點擊查詢小圖標后，此欄背景色高亮顯示，是用戶一目了然實現代碼如下：源碼copy to clipboard打印？
01.// 點擊左側查詢小圖標
02.function click(obj) {
03. // 先清理所有td元素，擦除上次高亮顯示腳印
04. var td_a = document.getElementsByTagName("td");
05. for (var i = 0; i < td_a.length; i++) {
06. td_a[i].setAttribute("bgcolor", "#ffffff");
07. }
08.
09. // 高亮標記本次查詢信息
10. obj.parentNode.setAttribute("bgcolor", "#ff0000");
11.
12. var data_a = [];
13. var data = obj.value;
14. data_a.push(data);
15. addMarker(data_a);
16.}
總結
- 上一篇： Ecstore/BBC 后台权限
- 下一篇： 7-1 圆形体体积计算器 (20 分)