pbootcms模板如何增加百度地图(1)

wdzsjl 4周前 (10-27) 阅读数 16 #帝国EmpireCMS
  1. 找到模板文件

    • 模板文件位于 template 文件夹中,例如 template/contact.html
  2. 添加百度地图代码

    • 在合适的位置插入以下代码:
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=YQiwVrOyoN9C9ZMGkVL2a4jT"></script> <style type="text/css">     #allmap {         width: 100%;         height: 400px;         margin-top: 20px;         overflow: hidden;         font-family: "微软雅黑";     }     #allmap b {         color: #CC5522;         font-size: 14px;     }     #allmap img {         max-width: none;     } </style> <div id="allmap"></div> <script type="text/javascript">     var map = new BMap.Map("allmap");     map.centerAndZoom(new BMap.Point(116.404, 39.915), 18); // 设置地图中心点和缩放级别     var marker1 = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建标注     map.addOverlay(marker1); // 将标注添加到地图中     // marker1.setAnimation(BMAP_ANIMATION_BOUNCE); // 跳动的动画     // 创建信息窗口     var infoWindow1 = new BMap.InfoWindow("<b>{pboot:companyname}</b><br>地址:{pboot:companyaddress}<br>电话:{pboot:companyphone}");     marker1.openInfoWindow(infoWindow1);     // marker1.addEventListener("click", function(){this.openInfoWindow(infoWindow1);});     // 向地图中添加缩放控件     var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });     map.addControl(ctrl_nav);     // 向地图中添加缩略图控件     var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });     map.addControl(ctrl_ove);     // 向地图中添加比例尺控件     var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });     map.addControl(ctrl_sca);     map.enableDragging(); // 启用地图拖拽事件,默认启用(可不写)     map.enableScrollWheelZoom(); // 启用地图滚轮放大缩小     map.enableDoubleClickZoom(); // 启用鼠标双击放大,默认启用(可不写)     map.enableKeyboard(); // 启用键盘上下左右键移动地图 </script>
  3. 设置坐标

    • 到后台设置坐标
wx.jpg ywfw.jpg
热门