免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
Board logo

標題: [分享] 添加【百度地图】 [打印本頁]

作者: 无界    時間: 2013-5-10 21:21     標題: 添加【百度地图】

效果:
QQ截图20130510210527.jpg

QQ截图20130510210606.jpg

QQ截图20130510210641.jpg


方法:

1、其他头部信息:添加代码去掉帮助分类,已经去除的可忽略。

  1. <!--隐藏帮助分类-->
  2. <style>
  3. #faq .main,#faq .content {margin-left:0px!important;}
  4. #faq .side {display:none;}
  5. </style>
  6. <!--隐藏帮助分类end-->
複製代碼


2、新建帮助分类将下面代码放进去


  1. <script>$("wrap").className="wrap s_clear";$("nav").innerHTML='<a href="index.php">TLB爱我吧俱乐部</a> &raquo;百度地图';</script>
  2. <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
  3. <style type="text/css">
  4. #ct { position: relative; }
  5. #srch { position: absolute; top: 10px; left: 100px; z-index: 100; border: 1px solid #cdcdcd; background: #f3f3f3; padding: 3px; }
  6. </style>
  7. <div id="ct" class="wp cl">
  8. <div id="srch">
  9.   <input type="text" class="px vm" id="keyword" /><button type="button" class="pn pnp vm" onclick="search()"><strong>搜索</strong></button>
  10. </div>
  11. <div id="baidu_map" class="bm" style="width:100%; height:600px;"></div>
  12. </div>
  13. <script type="text/javascript">
  14. var map = new BMap.Map("baidu_map");
  15. map.addControl(new BMap.NavigationControl());
  16. map.addControl(new BMap.ScaleControl());
  17. map.addControl(new BMap.OverviewMapControl());   
  18. map.addControl(new BMap.MapTypeControl());  
  19. map.centerAndZoom(new BMap.Point(), 17);
  20. var myCity = new BMap.LocalCity();
  21. myCity.get(function(result) {
  22.   map.centerAndZoom(result.name, 17);
  23. });
  24. var local = new BMap.LocalSearch(map, {
  25.   renderOptions: {
  26.    map: map,
  27.    autoViewport: true,
  28.    selectFirstResult: false
  29.   }
  30. });
  31. function search() {
  32.   local.clearResults();
  33.   local.search($('keyword').value);
  34. }
  35. </script>
複製代碼


3、新建一个导航链接即可。



圖片附件: QQ截图20130510210527.jpg (2013-5-10 21:15, 355.39 KB) / 下載次數 510
http://joinbbs.net/discuz/attachment.php?aid=20477&k=2aa9d08e51693eb24b6f0851d33357ad&t=1714020839&sid=AlH5wL



圖片附件: QQ截图20130510210606.jpg (2013-5-10 21:16, 334.31 KB) / 下載次數 542
http://joinbbs.net/discuz/attachment.php?aid=20478&k=22b67efd57e8cfda0f9ec7525156b930&t=1714020839&sid=AlH5wL



圖片附件: QQ截图20130510210641.jpg (2013-5-10 21:16, 128.45 KB) / 下載次數 551
http://joinbbs.net/discuz/attachment.php?aid=20479&k=725c749299b729ee0146fdeb2139f152&t=1714020839&sid=AlH5wL


作者: 章鱼    時間: 2013-5-10 21:44

这个不错,支持下
作者: luluxiuMUGEN    時間: 2013-5-10 22:41

很不错啊
作者: ldzy    時間: 2013-5-11 10:19

赞赞~!~!
作者: hkorz    時間: 2013-5-11 11:09

不錯看!!
作者: 4rphotoclub    時間: 2013-5-23 13:03

這個真是超級棒啊




歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://joinbbs.net/discuz/) Powered by Discuz! 7.2