pbootcms模板如何增加百度地图(1)
-
找到模板文件
- 模板文件位于
template
文件夹中,例如template/contact.html
。
- 模板文件位于
-
添加百度地图代码
- 在合适的位置插入以下代码:
<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>
-
设置坐标
- 到后台设置坐标