使用百度地图api2.0版本给帝国cms增加地图标注功能

时间：2016-04-07 16:51:34

分类：帝国教程

百度地图api目前已经升级到了2.0版本，虽然之前的版本仍可用，但百度已经不推荐了，而且2.0版本获得了很多新功能，有些朋友想增加到帝国cms中，这里我们给出方法。

第一步、增加扩展变量

系统 - 系统设置 - 扩展变量 - 增加

变量名：diqu

变量标识：地区

是否写入缓存：写入缓存

变量值：北京

百度地图标注.jpg

第二步、新建数据表字段：

系统 - 数据表与系统模型 - 管理数据表 - 管理字段 - 增加字段

字段名分别为：lng  lat  zoom

对应标识为：经度  纬度  缩放比例

字段类型：varchar

百度地图标注,增加字段.png

第三步、将下面的代码保存为mapmove.js，放置在合适的位置：

折叠JavaScript 代码
  1. var get = {  
  2.     byId: function(id) {  
  3.         return typeof id === "string" ? document.getElementById(id) : id  
  4.     },  
  5.     byClass: function(sClass, oParent) {  
  6.         var aClass = [];  
  7.         var reClass = new RegExp("(^| )" + sClass + "( |$)");  
  8.         var aElem = this.byTagName("*", oParent);  
  9.         for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);  
  10.         return aClass  
  11.     },  
  12.     byTagName: function(elem, obj) {  
  13.         return (obj || document).getElementsByTagName(elem)  
  14.     }  
  15. };  
  16. var dragMinWidth = 800;  
  17. var dragMinHeight = 600;  
  18. /*-------------------------- + 
  19. 拖拽函数 
  20. +-------------------------- */  
  21. function drag(oDrag, handle){  
  22.     var disX = dixY = 0;  
  23.     var oMax = get.byClass("max", oDrag)[0];  
  24.     var oRevert = get.byClass("revert", oDrag)[0];  
  25.     var oClose = get.byClass("close", oDrag)[0];  
  26.     var allMap = document.getElementById("allmap");  
  27.     handle = handle || oDrag;  
  28.     handle.style.cursor = "move";  
  29.     handle.onmousedown = function (event){  
  30.         var event = event || window.event;  
  31.         disX = event.clientX - oDrag.offsetLeft;  
  32.         disY = event.clientY - oDrag.offsetTop;  
  33.         document.onmousemove = function (event){  
  34.             var event = event || window.event;  
  35.             var iL = event.clientX - disX;  
  36.             var iT = event.clientY - disY;  
  37.             var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;  
  38.             var maxT = document.documentElement.clientHeight - oDrag.offsetHeight;  
  39.             iL <= 0 && (iL = 0);  
  40.             iT <= 0 && (iT = 0);  
  41.             iL >= maxL && (iL = maxL);  
  42.             iT >= maxT && (iT = maxT);  
  43.             oDrag.style.left = iL + "px";  
  44.             oDrag.style.top = iT + "px";  
  45.             return false  
  46.         };  
  47.         document.onmouseup = function (){  
  48.             document.onmousemove = null;  
  49.             document.onmouseup = null;  
  50.             this.releaseCapture && this.releaseCapture()  
  51.         };  
  52.         this.setCapture && this.setCapture();  
  53.         return false  
  54.     };  
  55.     //最大化按钮  
  56.     oMax.onclick = function (){  
  57.         oDrag.style.top = oDrag.style.left = 0;  
  58.         //整个窗体  
  59.         oDrag.style.width = document.documentElement.clientWidth - 2 + "px";  
  60.         oDrag.style.height = document.documentElement.clientHeight - 2 + "px";  
  61.         //地图大小  
  62.         allMap.style.width = document.documentElement.clientWidth - 15 + "px";  
  63.         allMap.style.height = document.documentElement.clientHeight - 100 + "px";  
  64.         this.style.display = "none";  
  65.         oRevert.style.display = "block";  
  66.     };  
  67.     //还原按钮  
  68.     oRevert.onclick = function (){  
  69.         oDrag.style.width = dragMinWidth + "px";  
  70.         oDrag.style.height = dragMinHeight + "px";  
  71.         oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + "px";  
  72.         oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + "px";  
  73.         //地图大小  
  74.         allMap.style.width = "790px";  
  75.         allMap.style.height = "500px";  
  76.         this.style.display = "none";  
  77.         oMax.style.display = "block";  
  78.     };  
  79.     //关闭按钮  
  80.     oClose.onclick = function (){  
  81.         map.clearOverlays();  
  82.         document.getElementById("lng").value = '';  
  83.         document.getElementById("lat").value = '';  
  84.         oDrag.style.display = "none";  
  85.     };  
  86. }  

第四步、修改相应模型：

将下面的代码加入模型表单，并开启刚才增加的三个新字段。

折叠PHP 代码
  1. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=<?=$public_r['add_baidumapkey']?>"></script>  
  2. <script src="http://api.map.baidu.com/library/MarkerTool/1.2/src/MarkerTool_min.js" type="text/javascript"></script>  
  3. <script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.4/src/CityList_min.js"></script>  
  4. <script type="text/javascript" src="mapmove.js"></script>  
  5. <style type="text/css">  
  6.         /* drag */  
  7.         #main { position:relative;}  
  8.         #drag{position:absolute;top:22px;left:290px;width:800px;height:600px;background:#e9e9e9;border:1px solid #444;border-radius:5px;box-shadow:0 1px 3px 2px #666;display: none}  
  9.         #drag .title{position:relative;height:27px;margin:5px;}  
  10.         #drag .title h2{font-size:14px;height:27px;line-height:24px;border-bottom:1px solid #A1B4B0;}  
  11.         #drag .title div{position:absolute;height:19px;top:2px;right:0;}  
  12.         #drag .title a{float:left;width:21px;height:19px;display:block;margin-left:5px;background:url(./images/tool.png) no-repeat;}  
  13.         #drag .title a.max{background-position:-60px 0;}  
  14.         #drag .title a.max:hover{background-position:-60px -29px;}  
  15.         #drag .title a.revert{background-position:-149px 0;display:none;}  
  16.         #drag .title a.revert:hover{background-position:-149px -29px;}  
  17.         #drag .title a.close{background-position:-89px 0;}  
  18.         #drag .title a.close:hover{background-position:-89px -29px;}  
  19.         #drag .content{overflow:auto;margin:0 5px;}  
  20.   
  21.         #f_container{border: 1px solid #999999;position: absolute;top:50px;left: 10px;z-index: 1000;    }  
  22.         #container{width:290px;overflow: hidden;height: 20px;background:#F2F3F5;border: 5px solid #F2F3F5; }  
  23.         #container select{border: 1px solid #ccc;}  
  24.         .content .btn,.content .rbtn{width:105px; height: 30px;font-size: 13px; }  
  25.           
  26. </style>  
  27.   
  28. [!--lng--][!--lat--][!--zoom--]  
  29.       <input type="button" value="开始标注" id="biaozhu" onclick="show()" style="width:100px;height:30px;">  
  30.       <br /><div id='show_map' style="width:300px;height:250px;"></div></td>  
  31.   <div id="drag">  
  32.         <div class="title">  
  33.                 <h2>1.选择位置>2.标注位置>3.保存位置</h2>  
  34.                 <div>  
  35.                         <a class="max" href="javascript:;" title="最大化"></a>  
  36.                         <a class="revert" href="javascript:;" title="还原"></a>  
  37.                         <a class="close" href="javascript:;" title="关闭"></a>  
  38.                 </div>  
  39.         </div>  
  40.         <div class="content">  
  41.                 <div id="f_container">  
  42.                         <div id="container"></div>  
  43.                 </div>  
  44.                 <div id="allmap" style="width:790px;height:500px;"></div>  
  45.                 <div style="margin-top: 15px;text-align: right">  
  46.                         <input type="button" onclick="showMap();" class="btn" value="保存">  
  47.                         <input type="button" onclick="dhide()" class="rbtn" value="取消">  
  48.                 </div>  
  49.         </div>  
  50. </div>  
  51. <script type="text/javascript">  
  52.         var marker, oDrag = document.getElementById("drag");  
  53.         // 百度地图API功能  
  54.         var map = new BMap.Map("allmap");            // 创建Map实例  
  55.         map.enableScrollWheelZoom(true);  
  56.         map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));    // 右下比例尺  
  57.         map.setDefaultCursor("Crosshair");//鼠标样式  
  58.         map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT}));  //右上角，仅包含平移和缩放按钮  
  59.         var cityList = new BMapLib.CityList({  
  60.                 container: 'container',  
  61.                 map: map  
  62.         });  
  63.         map.addEventListener("click", showInfo);  
  64.         function showInfo(e){  
  65.                 map.clearOverlays();  
  66.                 marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));  // 创建标注  
  67.                 map.addOverlay(marker);  
  68.                 //获取经纬度  
  69.                 document.getElementById("lng").value = e.point.lng;  
  70.                 document.getElementById("lat").value = e.point.lat;  
  71.                 document.getElementById("zoom").value = map.getZoom();  
  72.         }  
  73.   
  74.         function show(){  
  75.                 map.centerAndZoom('<?=$public_r['add_diqu']?>',12);                   // 初始化地图,设置城市和地图级别。  
  76.                 oDrag.style.display = "block";  
  77.         }  
  78.         function dhide(){  
  79.                 map.clearOverlays();  
  80.                 document.getElementById("lng").value = '';  
  81.                 document.getElementById("lat").value = '';  
  82.                 oDrag.style.display = "none";  
  83.         }  
  84.           
  85.         function showMap(){  
  86.                 oDrag.style.display = "none";  
  87.                 var map1 = new BMap.Map("show_map");  
  88.                 var lng = document.getElementById("lng").value;  
  89.                 var lat = document.getElementById("lat").value;  
  90.                 var zoom = document.getElementById("zoom").value;  
  91.                 <?  
  92.                 $zoom=$r[zoom]?$r[zoom]:'map.getZoom()';  
  93.                 ?>  
  94.                 map1.centerAndZoom(new BMap.Point(lng, lat), <?=$zoom?>);  
  95.                 var marker1 = new BMap.Marker(new BMap.Point(lng, lat));  // 创建标注  
  96.                 map1.addOverlay(marker1);              // 将标注添加到地图中  
  97.         }  
  98.           
  99.         <?  
  100.         if($r[lng]&&$r[lat]){  
  101. ?>showMap();<?  
  102.         }  
  103.         ?>  
  104. </script>  

第五步、完成。

增加信息，此时发布信息表单已经有此设置，下面是效果截图：

百度地图api1.jpg

百度地图api2.jpg

百度地图api3.jpg

分享

相关文章

相关推荐

为帝国CMS用户提供动力

Copyright © 2016 CmsDX.com All Rights Reserved.