帝国cms制作的模板中百度地图联系方式及经纬度信息的修改

时间：2017-05-05 09:49:31

分类：帝国教程

很多朋友在使用帝国cms模板过程中，经常会遇到百度地图信息不知道怎么修改的情况，这种问题在企业网站中居多，下面我们来学习一下怎么修改。

首先要确定地图信息存在什么位置，查看该处页面的源码，以我们现在的案例来看，源码如下，这里是一个框架，推断应该是一个单页：

无标题.jpg

我们到帝国cms后台 栏目 - 自定义页面 - 管理自定义页面，确实在里边，我们点击修改：

QQ截图20170505100144.jpg

可以看到源码如下，我们要修改其中的“两处经纬度坐标”以及“联系信息”，分别为28、55行的Point值，还有55行的title、content信息。

折叠XML/HTML 代码
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>百度地图</title>  
  6. </head>  
  7.   
  8. <body>  
  9. <style type="text/css">  
  10.     html,body{margin:0;padding:0;}  
  11.     .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}  
  12.     .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}  
  13. </style>  
  14. <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>  
  15. <div style="width:100%;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div>  
  16. <script type="text/javascript">  
  17.     //创建和初始化地图函数：  
  18.     function initMap(){  
  19.         createMap();//创建地图  
  20.         setMapEvent();//设置地图事件  
  21.         addMapControl();//向地图添加控件  
  22.         addMarker();//向地图中添加marker  
  23.     }  
  24.       
  25.     //创建地图函数：  
  26.     function createMap(){  
  27.         var map = new BMap.Map("map");//在百度地图容器中创建一个地图  
  28.         var point = new BMap.Point(116.403874,39.914889);//定义一个中心点坐标  
  29.         map.centerAndZoom(point,12);//设定地图的中心点和坐标并将地图显示在地图容器中  
  30.         window.map = map;//将map变量存储在全局  
  31.     }  
  32.       
  33.     //地图事件设置函数：  
  34.     function setMapEvent(){  
  35.         map.enableDragging();//启用地图拖拽事件，默认启用(可不写)  
  36.         map.enableScrollWheelZoom();//启用地图滚轮放大缩小  
  37.         map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)  
  38.         map.enableKeyboard();//启用键盘上下左右键移动地图  
  39.     }  
  40.       
  41.     //地图控件添加函数：  
  42.     function addMapControl(){  
  43.         //向地图中添加缩放控件  
  44.     var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});  
  45.     map.addControl(ctrl_nav);  
  46.         //向地图中添加缩略图控件  
  47.     var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});  
  48.     map.addControl(ctrl_ove);  
  49.         //向地图中添加比例尺控件  
  50.     var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});  
  51.     map.addControl(ctrl_sca);  
  52.     }  
  53.       
  54.     //标注点数组  
  55.     var markerArr = [{title:"北京某某有限公司",content:"地址：北京市西城区天安门广场",point:"116.403874|39.908248",isOpen:1,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}  
  56.          ];  
  57.     //创建marker  
  58.     function addMarker(){  
  59.         for(var i=0;i<markerArr.length;i++){  
  60.             var json = markerArr[i];  
  61.             var p0 = json.point.split("|")[0];  
  62.             var p1 = json.point.split("|")[1];  
  63.             var point = new BMap.Point(p0,p1);  
  64.             var iconImg = createIcon(json.icon);  
  65.             var marker = new BMap.Marker(point,{icon:iconImg});  
  66.             var iw = createInfoWindow(i);  
  67.             var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});  
  68.             marker.setLabel(label);  
  69.             map.addOverlay(marker);  
  70.             label.setStyle({  
  71.                         borderColor:"#808080",  
  72.                         color:"#333",  
  73.                         cursor:"pointer"  
  74.             });  
  75.               
  76.             (function(){  
  77.                 var iindex = i;  
  78.                 var _iw = createInfoWindow(i);  
  79.                 var _marker = marker;  
  80.                 _marker.addEventListener("click",function(){  
  81.                     this.openInfoWindow(_iw);  
  82.                 });  
  83.                 _iw.addEventListener("open",function(){  
  84.                     _marker.getLabel().hide();  
  85.                 })  
  86.                 _iw.addEventListener("close",function(){  
  87.                     _marker.getLabel().show();  
  88.                 })  
  89.                 label.addEventListener("click",function(){  
  90.                     _marker.openInfoWindow(_iw);  
  91.                 })  
  92.                 if(!!json.isOpen){  
  93.                     label.hide();  
  94.                     _marker.openInfoWindow(_iw);  
  95.                 }  
  96.             })()  
  97.         }  
  98.     }  
  99.     //创建InfoWindow  
  100.     function createInfoWindow(i){  
  101.         var json = markerArr[i];  
  102.         var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");  
  103.         return iw;  
  104.     }  
  105.     //创建一个Icon  
  106.     function createIcon(json){  
  107.         var icon = new BMap.Icon("http://api0.map.bdimg.com/images/marker_red_sprite.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})  
  108.         return icon;  
  109.     }  
  110.       
  111.     initMap();//创建和初始化地图  
  112. </script>  
  113. </body>  
  114. </html>  

这个经纬度值如何获取呢，我们访问 http://api.map.baidu.com/lbsapi/getpoint/index.html ，在输入框中输入实际地址搜索，然后鼠标点击实际位置，就可以获得经纬度。

QQ截图20170505101156.jpg

我们复制这个经纬度，放在源码中的相应位置就好了，其中55行的经纬度是以竖线 | 分割，并不是逗号，这个一定要注意。

 

本次地图是存储在自定义页面中，也有可能在内容模板、列表模板中，这个我们要根据实际情况来寻找。

分享

相关文章

相关推荐

为帝国CMS用户提供动力

Copyright © 2016 CmsDX.com All Rights Reserved.