帝国cms模板制作:百度地图经纬度值如何获取?怎么修改?

2021-02-1317:39:13网站建设与开发Comments2,284 views字数 4548阅读模式

帝国cms模板过程中,经常会遇到百度地图信息不知道怎么修改的情况,这种问题在企业网站中居多,下面我们来学习一下怎么修改。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/20967.html

首先要确定地图信息存在什么位置,查看该处页面的源码,以我们现在的案例来看,源码如下,这里是一个框架,推断应该是一个单页:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/20967.html

帝国cms模板制作:百度地图经纬度值如何获取?怎么修改?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/20967.html

我们到帝国cms后台 栏目 - 自定义页面 - 管理自定义页面,确实在里边,我们点击修改:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/20967.html

帝国cms模板制作:百度地图经纬度值如何获取?怎么修改?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/20967.html

可以看到源码如下,我们要修改其中的“两处经纬度坐标”以及“联系信息”,分别为28、55行的Point值,还有55行的title、content信息。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/20967.html

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

这个经纬度值如何获取呢,我们访问 http://api.map.baidu.com/lbsapi/getpoint/index.html ,在输入框中输入实际地址搜索,然后鼠标点击实际位置,就可以获得经纬度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/20967.html

帝国cms模板制作:百度地图经纬度值如何获取?怎么修改?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/20967.html

我们复制这个经纬度,放在源码中的相应位置就好了,其中55行的经纬度是以竖线 | 分割,并不是逗号,这个一定要注意。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/20967.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/20967.html

本次地图是存储在自定义页面中,也有可能在内容模板、列表模板中,这个我们要根据实际情况来寻找。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/20967.html

Tags: 模板   地图
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/20967.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/cms/20967.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定