帝国cms添加百度API地图,默认显示提示框
百度API地图显示效果如图:
利用自定义页面添加ditu.html,再引用iframe
<iframe scrolling="no" src="[!--news.url--]ditu.html"></iframe>
给iframe定义样式:
iframe { display: block; margin: 30px auto; width: 100%; height: 400px; border: 0; }
ditu.html参考代码:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="百度地图,百度地图API,百度地图自定义工具,百度地图所见即所得工具" /> <meta name="description" content="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图" /> <title>百度地图API自定义地图</title> <!--引用百度地图API--> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=授权码"></script> </head> <body> <!--百度地图容器--> <div style="width:100%;height:400px;border:#ccc solid 1px;" id="map"></div> </body> <script type="text/javascript"> var cp_title="XX有限公司"; var cp_content="电话:123-456-789<br/>地址:XXXX16号"; var cp_lng=114.08607; var cp_lat=22.995141; //创建和初始化地图函数: function initMap(){ createMap();//创建地图 setMapEvent();//设置地图事件 addMapControl();//向地图添加控件 addMapOverlay();//向地图添加覆盖物 } function createMap(){ map = new BMap.Map("map"); map.centerAndZoom(new BMap.Point(cp_lng,cp_lat),19); } function setMapEvent(){ map.enableScrollWheelZoom(); map.enableKeyboard(); map.enableDragging(); map.enableDoubleClickZoom() } function addClickHandler(target,window){ target.addEventListener("click",function(){ target.openInfoWindow(window); }); } function addMapOverlay(){ var markers = [ {content:cp_content,title:cp_title,imageOffset: {width:-46,height:-21},position:{lat:cp_lat,lng:cp_lng}} ]; for(var index = 0; index < markers.length; index++ ){ var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat); var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{ imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height) })}); var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)}); var opts = { width: 200, title: markers[index].title, enableMessage: false }; var infoWindow = new BMap.InfoWindow(markers[index].content,opts);// 创建信息窗口对象 marker.setLabel(label); addClickHandler(marker,infoWindow); map.addOverlay(marker); map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口 }; } //向地图添加控件 function addMapControl(){ var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}); scaleControl.setUnit(BMAP_UNIT_IMPERIAL); map.addControl(scaleControl); var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); map.addControl(navControl); var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true}); map.addControl(overviewControl); } var map; initMap(); </script> <style> .BMap_bubble_content { font-size: 13px;} .BMap_bubble_title { font-weight: bold; margin-bottom: 8px;} label.BMapLabel { display: none !important;} </style> </html>
地图制作方法:
1、申请百度APT地图账号,需要实名认证
2、控制台创建应用,添加网站白名单,获取AK,替换ditu.html的AK
3、坐标拾取:http://api.map.baidu.com/lbsapi/getpoint/index.html,替换ditu.html坐标位置
HTTPS加了证书的话,还需要修改ditu.html
1、在</head>之前添加js
<script type="text/javascript">window.HOST_TYPE='2'</script>
2、修改http为https
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=授权码"></script>
以上就是关于中"帝国cms添加百度API地图,默认显示提示框"的全部内容,如果有遇到其他问题的,可以在评论留言,或者加微信咨询。
相关文章
-
帝国cms留言页,搜索页支持标签调用方法
帝国cms留言页面以及搜索页面是动态的页面,不支持标签调用,所以在查看的时候,会发现标签代码都显示出来了,要让动态页面支持标签调用,应该怎么做呢?下面是青青模板网整理的的有关帝国cms 动态留言页,搜索页支持标签调用方法。
帝国cms常见问题2022-03-26 -
帝国cms怎么修改列表页的分页CSS样式?
修改帝国默认的列表分页样式,有两种方案,一种是修改帝国cms文件,一种是不修改文件的前提下,用css来改变样式就可以了。下面是青青模板网整理的关于本篇内容“帝国cms怎样修改列表分页函数”解决方案和思路,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。
帝国cms常见问题2022-03-29 -
帝国cms美化后台登录界面
帝国cms美化后台登录界面也是青青在使用帝国cms程序过程中经常会遇到的。下面是青青模板网整理的关于帝国cms美化后台登录界面中的解决方案和思路,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。
帝国cms使用教程2023-07-02 -
帝国cms灵动标签如何调用友情链接?
帝国cms灵动标签调用友情链接,可以是文字的友情链接,或者是图片式的友情链接,下拉列表的友情链接等。下面是青青模板网整理的关于帝国cms如何用灵动标签来调用友情链接的解决方案和思路,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。
帝国cms常见问题2022-04-02 -
帝国cms安装PHP7以上版本报错的解决方法
使用PHP7版本以上的运行环境时,以下两种情况,设置支持PHP7以上的操作步骤,全新安装帝国CMS时,只需安装时MYSQL接口类型选择mysqli即可支持PHP7系列。已经安装好帝国CMS换PHP7以上运行环境时只需修改配置文件/e/config/config.php。
帝国cms使用教程2022-03-28 -
帝国cms使用火车头采集器无法获取列表
帝国cms后台采集有时候并不好用,会提示网页无法打开,但同样的规则用火车头就可以采集到,并且可以一键发布到后台,新手在使用火车头采集器的时候,会遇到无法获取列表的问题,下面是青青模板网整理的关于“如何使用火车头采集器发布帝国cms内容”中的解决方案和思路,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。
帝国cms常见问题2023-01-20 -
帝国cms用灵动标签调用一级栏目ID的方法
帝国cms灵动标签调用所有顶级栏目,也是青青在使用帝国cms程序过程中经常会遇到的。下面是青青模板网整理的关于帝国cms灵动标签调用所有一级(定级)栏目的解决方案和思路,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。
帝国cms常见问题2022-03-28 -
帝国cms多值字段如何调用?
帝国cms多值字段的调用,多值字段存放方式:多个值之间用“||||||”分隔、值里的各个选项之间用“::::::”分隔。下面为内容模板中显示多值字段例子。下面是青青模板网整理的关于帝国cms多值字段的调用的解决方案和思路,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。
帝国cms调用教程2022-04-08 -
帝国cms灵动标签调用swiper幻灯片的方法
在帝国cms中可以直接使用标签[phomeflashpic]调用幻灯片,但是现在所有浏览器已经不支持flash了,但幻灯片几乎在每个网站中都占着重要的位置,都是在首页导航下出现,现在最流行的幻灯片是swiper,swiper还可以支持移动端手势滑动。下面是青青模板网整理的关于帝国cms中使用swiper作为幻灯片的调用方法的解决方案和思路,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。
帝国cms常见问题2022-04-02 -
帝国cms如何修改和美化提示对话框?
帝国cms默认的提示框不是很好看,想要美化的站长没朋友,可以看青青模板网整理的关于如何修改帝国cms默认提示框的解决方案和思路,方便新手站长们在利用帝国cms建网站的时候,可以少走一些弯路。
帝国cms使用教程2022-03-31