01 <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=IZ4JODRg1DVV7YiJL9FtxJo6js4DeG7e&s=1"></script>
<script type=“text/javascript”src= "https://api.map.baidu.com/api?v=2.0&ak=IZ4JODRg1DVV7YiJL9FtxJo6js4DeG7e&s=1" ></script>
02 #allmap {width: 100%;height: 400px;margin-top:20px;overflow: hidden;font-family:"微软雅黑";}
03 #allmap b{color: #CC5522;font-size: 14px; }
04 #allmap img{max-width: none;}
#allmap img{max-width: none;
05 </style>
06 <div id="allmap"></div>
<div id=“allmap”></div>
07 <script type="text/javascript">
<script type=“text/javascript”>
08 var map = new BMap.Map("allmap");
var map = new BMap.Map(“allmap”);
09 map.centerAndZoom(new BMap.Point({label:map}), 18);
10 var marker1 = new BMap.Marker(new BMap.Point({label:map})); // 创建标注
11 map.addOverlay(marker1); // 将标注添加到地图中
12 //marker1.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
13 //创建信息窗口
创建信息窗口
14 var infoWindow1 = new BMap.InfoWindow("<b>{pboot:companyname}</b><br>地址:{pboot:companyaddress}<br>电话:{pboot:companyphone}");
var infoWindow1 = new BMap.InfoWindow( "<b>{pboot:companyname}</b><br>地址:{pboot:companyaddress}<br>电话:{pboot:companyphone}" );
15 marker1.openInfoWindow(infoWindow1);
16 //marker1.addEventListener("click", function(){this.openInfoWindow(infoWindow1);});
marker1.addEventListener(“click”, 函数 (){this.openInfoWindow(infoWindow1);});
17 //向地图中添加缩放控件
向地图中添加缩放控件
18 var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT, 类型 :BMAP_NAVIGATION_CONTROL_LARGE});
19 map.addControl(ctrl_nav);
map.addControl(ctrl_nav);
20 //向地图中添加缩略图控件
向地图中添加缩略图控件
21 var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
22 map.addControl(ctrl_ove);
map.addControl(ctrl_ove);
23 //向地图中添加比例尺控件
向地图中添加比例尺控件
24 var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
25 map.addControl(ctrl_sca);
map.addControl(ctrl_sca);
26
27 map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
28 map.enableScrollWheelZoom();//启用地图滚轮放大缩小
29 map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
30 map.enableKeyboard();//启用键盘上下左右键移动地
31 </script> </脚本>
pbootcms模板如何增加百度地图
首先找到你要增加的模板,模板路径:template文件夹,比如要加到联系contact.html上,找打合适的位置,加上如下代码:
06 | <div id = "allmap" ></div>
<div id = “allmap” ></div> |
07 | <script type = "text/javascript" >
<script type = “text/javascript” > |
08 | var map = new BMap.Map( "allmap" );
var map = new BMap.Map( “allmap”);
|
09 | map.centerAndZoom(new BMap.Point({label:map}), 18); |
10 | var marker1 = new BMap.Marker(new BMap.Point({label:map})); // 创建标注 |
11 | map.addOverlay(marker1); // 将标注添加到地图中 |
12 | //marker1.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 |
14 | var infoWindow1 = new BMap.InfoWindow( "<b>{pboot:companyname}</b><br>地址:{pboot:companyaddress}<br>电话:{pboot:companyphone}" );
var infoWindow1 = new BMap.InfoWindow( "<b>{pboot:companyname}</b><br>地址:{pboot:companyaddress}<br>电话:{pboot:companyphone}" ); |
15 | marker1.openInfoWindow(infoWindow1); |
16 | //marker1.addEventListener( "click" , function (){this.openInfoWindow(infoWindow1);});
marker1.addEventListener( “click” , 函数 (){this.openInfoWindow(infoWindow1);}); |
17 | //向地图中添加缩放控件
向地图中添加缩放控件 |
18 | var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT, type :BMAP_NAVIGATION_CONTROL_LARGE});
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT, 类型 :BMAP_NAVIGATION_CONTROL_LARGE}); |
19 | map.addControl(ctrl_nav);
map.addControl(ctrl_nav); |
20 | //向地图中添加缩略图控件
向地图中添加缩略图控件 |
21 | var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1}); |
22 | map.addControl(ctrl_ove);
map.addControl(ctrl_ove); |
23 | //向地图中添加比例尺控件
向地图中添加比例尺控件 |
24 | var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}); |
25 | map.addControl(ctrl_sca);
map.addControl(ctrl_sca); |
27 | map.enableDragging();//启用地图拖拽事件,默认启用(可不写) |
28 | map.enableScrollWheelZoom();//启用地图滚轮放大缩小 |
29 | map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写) |
30 | map.enableKeyboard();//启用键盘上下左右键移动地 |
然后到后台 按下图设置:

设置后填写坐标:

坐标获取地址:http://api.map.baidu.com/lbsapi/getpoint/