easyui左侧导航菜单右侧载入百度地图项目框架
生活随笔
收集整理的這篇文章主要介紹了
easyui左侧导航菜单右侧载入百度地图项目框架
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
代碼下載
http://pan.baidu.com/s/1cDht7K
一個左側是導航菜單，右側是百度地圖的應用；
一 左側菜單
使用jquery easyui框架；網上下的資源；運行后如下；
二 修改菜單
修改后如下；標注，地理要素，數據管理；這些是GIS功能；
三 jquery ?easyui框架是這么用的；
單擊左側不同菜單；鏈接到不同html文檔；就會在右側顯示相應文檔；
四 載入百度地圖
在其中一個demo2.html中，載入百度地圖；效果如下；以后可點擊左側菜單，在右側增加百度地圖應用；
五 相關代碼
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery.EasyUI- 1.2.6 后臺經典框架使用DEMO</title><link href="Css/default.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css" /><link rel="stylesheet" type="text/css" href="js/themes/icon.css" /><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="js/jquery.easyui.min.js"></script><script type="text/javascript" src='js/XiuCai.index.js'> </script><script type="text/javascript">var _menus = {"menus": [{"menuid": "1","icon": "icon-sys","menuname": "標注管理","menus": [{"menuid": "12","menuname": "添加標注","icon": "icon-add","url": "http://hxling.cnblogs.com","child": [{"menuid": "140","menuname": "角色管理 3","icon": "icon-role","url": "demo2.html"},{"menuid": "150","menuname": "權限設置 3","icon": "icon-set","url": "demo.html"}]},{"menuid": "13","menuname": "標注類別管理","icon": "icon-users","url": "demo2.html","child": [{"menuid": "141","menuname": "角色管理 3","icon": "icon-role","url": "demo.html"},{"menuid": "151","menuname": "權限設置 3","icon": "icon-set","url": "demo1.html"}]},{"menuid": "14","menuname": "標注統計","icon": "icon-role","url": "demo2.html","child": [{"menuid": "142","menuname": "角色管理 3","icon": "icon-role","url": "demo2.html"},{"menuid": "152","menuname": "權限設置 3","icon": "icon-set","url": "demo.html"}]},{"menuid": "15","menuname": "權限設置","icon": "icon-set","url": "demo.html","child": [{"menuid": "143","menuname": "角色管理 3","icon": "icon-role","url": "demo2.html"},{"menuid": "153","menuname": "權限設置 3","icon": "icon-set","url": "demo.html"}]},{"menuid": "16","menuname": "系統日志","icon": "icon-log","url": "demo1.html","child": [{"menuid": "144","menuname": "角色管理 3","icon": "icon-role","url": "demo2.html"},{"menuid": "154","menuname": "權限設置 3","icon": "icon-set","url": "demo.html"}]}]},{"menuid": "8","icon": "icon-sys","menuname": "地理要素管理","menus": [{"menuid": "21","menuname": "員工列表","icon": "icon-nav","url": "demo.html"},{"menuid": "22","menuname": "視頻監控","icon": "icon-nav","url": "demo1.html","child": [{"menuid": "221","menuname": "員工列表 3","icon": "icon-nav","url": "demo.html"},{"menuid": "222","menuname": "視頻監控 3","icon": "icon-nav","url": "demo1.html"}]}]},{"menuid": "56","icon": "icon-sys","menuname": "數據管理","menus": [{"menuid": "31","menuname": "添加部門","icon": "icon-nav","url": "demo1.html"},{"menuid": "321","menuname": "部門列表","icon": "icon-nav","url": "demo2.html","child": [{"menuid": "311","menuname": "添加部門 4","icon": "icon-nav","url": "demo1.html"},{"menuid": "312","menuname": "部門列表 4","icon": "icon-nav","url": "demo2.html"}]}]}] };//設置登錄窗口function openPwd() {$('#w').window({title: '修改密碼',width: 300,modal: true,shadow: true,closed: true,height: 160,resizable:false});}//關閉登錄窗口function closePwd() {$('#w').window('close');}//修改密碼function serverLogin() {var $newpass = $('#txtNewPass');var $rePass = $('#txtRePass');if ($newpass.val() == '') {msgShow('系統提示', '請輸入密碼！', 'warning');return false;}if ($rePass.val() == '') {msgShow('系統提示', '請在一次輸入密碼！', 'warning');return false;}if ($newpass.val() != $rePass.val()) {msgShow('系統提示', '兩次密碼不一至！請重新輸入', 'warning');return false;}$.post('/ajax/editpassword.ashx?newpass=' + $newpass.val(), function(msg) {msgShow('系統提示', '恭喜，密碼修改成功！<br>您的新密碼為：' + msg, 'info');$newpass.val('');$rePass.val('');close();})}$(function() {openPwd();$('#editpass').click(function() {$('#w').window('open');});$('#btnEp').click(function() {serverLogin();})$('#btnCancel').click(function(){closePwd();})$('#loginOut').click(function() {$.messager.confirm('系統提示', '您確定要退出本次登錄嗎?', function(r) {if (r) {location.href = '/ajax/loginout.ashx';}});})});</script></head> <body class="easyui-layout" style="overflow-y: hidden" fit="true" scroll="no"> <noscript> <div style=" position:absolute; z-index:100000; height:2046px;top:0px;left:0px; width:100%; background:white; text-align:center;"><img src="images/noscript.gif" alt='抱歉，請開啟腳本支持！' /> </div></noscript><div id="loading-mask" style="position:absolute;top:0px; left:0px; width:100%; height:100%; background:#D2E0F2; z-index:20000"> <div id="pageloading" style="position:absolute; top:50%; left:50%; margin:-120px 0px 0px -120px; text-align:center; border:2px solid #8DB2E3; width:200px; height:40px; font-size:14px;padding:10px; font-weight:bold; background:#fff; color:#15428B;"> <img src="images/loading.gif" align="absmiddle" /> 正在加載中,請稍候...</div> </div><div region="north" split="true" border="false" style="overflow: hidden; height: 30px;background: url(images/layout-browser-hd-bg.gif) #7f99be repeat-x center 50%;line-height: 20px;color: #fff; font-family: Verdana, 微軟雅黑,黑體"><span style="float:right; padding-right:20px;" class="head">歡迎 瘋狂秀才 <a href="#" id="editpass">修改密碼</a> <a href="#" id="loginOut">安全退出</a></span><span style="padding-left:10px; font-size: 16px; "><img src="images/blocks.gif" width="20" height="20" align="absmiddle" /> jQuery.EasyUI- 1.2.6 應用實例</span></div><div region="south" split="true" style="height: 30px; background: #D2E0F2; "><div class="footer">By 瘋狂秀才(QQ:1055818239) jQuery.Easy-UI QQ討論群： 112044258、32994605、36534121、56271061</div></div><div region="west" split="true" title="導航菜單" style="width:180px;" id="west"><div id="nav"><!-- 導航內容 --></div></div><div id="mainPanle" region="center" style="background: #eee; overflow-y:hidden"><div id="tabs" class="easyui-tabs" fit="true" border="false" ><div title="歡迎使用" style="padding:20px;overflow:hidden; color:red; " ></div></div></div><!--修改密碼窗口--><div id="w" class="easyui-window" title="修改密碼" collapsible="false" minimizable="false"maximizable="false" icon="icon-save" style="width: 300px; height: 150px; padding: 5px;background: #fafafa;"><div class="easyui-layout" fit="true"><div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;"><table cellpadding=3><tr><td>新密碼：</td><td><input id="txtNewPass" type="Password" class="txt01" /></td></tr><tr><td>確認密碼：</td><td><input id="txtRePass" type="Password" class="txt01" /></td></tr></table></div><div region="south" border="false" style="text-align: right; height: 30px; line-height: 30px;"><a id="btnEp" class="easyui-linkbutton" icon="icon-ok" href="javascript:void(0)" >確定</a> <a id="btnCancel" class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)">取消</a></div></div></div><div id="mm" class="easyui-menu" style="width:150px;"><div id="tabupdate">刷新</div><div class="menu-sep"></div><div id="close">關閉</div><div id="closeall">全部關閉</div><div id="closeother">除此之外全部關閉</div><div class="menu-sep"></div><div id="closeright">當前頁右側全部關閉</div><div id="closeleft">當前頁左側全部關閉</div><div class="menu-sep"></div><div id="exit">退出</div></div></body> </html>demo.html <!DOCTYPE html> <html><head> <title>一個 HTML 頁面</title> </head><body> <p>body 元素的內容會顯示在瀏覽器中。</p> <p>title 元素的內容會顯示在瀏覽器的標題欄中。</p> <p>easyui 和baidu API</p> </body></html>
demo1.html <!DOCTYPE html> <html><head> <title>一個 HTML 頁面</title> </head><body> <table border="1"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr> </table> </body></html>
demo2.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Hello, World</title> <script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf87194&v=1.0&services=false"></script> </head> <body> <div style="width:1420px;height:840px;border:1px solid gray" id="container"></div> </body> </html><script type="text/javascript"> var map = new BMap.Map("container"); // 創建地圖實例 var point = new BMap.Point(116.404, 39.915); // 創建點坐標 map.centerAndZoom(point, 15); // 初始化地圖，設置中心點坐標和地圖級別 </script>
六 關于百度地圖
1 百度地圖api示例參閱
http://developer.baidu.com/map/jsdemo.htm#a1_2
2 api key
如果自己做項目請不要使用上面的api key；那個是網上隨便找的；需要申請自己的api key，才好；不要使用別人的api key；
可參閱
http://blog.csdn.net/bcbobo21cn/article/details/50956565
總結
以上是生活随笔為你收集整理的easyui左侧导航菜单右侧载入百度地图项目框架的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： opengl纹理示例
- 下一篇： 图解VC++工具栏和状态栏编程实例