![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap { 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>地图展示</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); // 创建Map实例 map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap { 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <title>异步加载地图</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> //百度地图API功能 function loadJScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://api.map.baidu.com/api?v=2.0&ak=您的密钥&callback=init"; document.body.appendChild(script); } function init() { var map = new BMap.Map("allmap"); // 创建Map实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point,15); map.enableScrollWheelZoom(); //启用滚轮放大缩小 } window.onload = loadJScript; //异步加载地图 </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html { 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} #map1_container,#map2_container {100%;height:50%;float:left;overflow: hidden;margin:0;} #allmap1{margin:0 0 3px;height:100%;} #allmap2{margin:3px 0 0;height:100%;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>同时加载两个地图</title> </head> <body> <div id="map1_container"><div id="allmap1"></div></div> <div id="map2_container"><div id="allmap2"></div></div> </body> </html> <script type="text/javascript"> //百度地图API功能 //加载第一张地图 var map1 = new BMap.Map("allmap1"); // 创建Map实例 var point1 = new BMap.Point(116.404, 39.915); map1.centerAndZoom(point1,15); map1.enableScrollWheelZoom(); //启用滚轮放大缩小 //加载第二张地图 var map2 = new BMap.Map("allmap2"); // 创建Map实例 var point2 = new BMap.Point(116.404, 39.915); map2.centerAndZoom(point2,15); map2.enableScrollWheelZoom(); //启用滚轮放大缩小 </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap { 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>根据城市名设置地图中心点</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); // 创建Map实例 map.centerAndZoom("上海",15); // 初始化地图,用城市名设置地图中心点 </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap { 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>设置地图最大、最小级别</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap",{minZoom:4,maxZoom:8}); // 创建Map实例,设置地图允许的最小/大级别 map.centerAndZoom(new BMap.Point(116.4035,39.915),8); map.enableScrollWheelZoom(true); </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html { 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{100%;height:500px;} p{margin-left:5px; font-size:14px;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>移动地图</title> </head> <body> <div id="allmap"></div> <p>初始化地图,中心点为(116.4035,39.915),缩放级别为8的北京市地图,2秒后,通过改变中心点坐标,地图平移到广州</p> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.4035,39.915),8); setTimeout(function(){ map.panTo(new BMap.Point(113.262232,23.154345)); //两秒后移动到广州 }, 2000); </script>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html { 100%;height: 100%;margin:0;font-family:"微软雅黑";} #allmap{100%;height:500px;} p{margin-left:5px; font-size:14px;} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>缩放地图</title> </head> <body> <div id="allmap"></div> <p>初始化展示中心点为(116.4035,39.915),缩放级别为8的北京市地图,2秒后,通过设置缩放级别将地图放大到14级</p> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.4035,39.915),8); setTimeout(function(){ map.setZoom(14); }, 2000); //2秒后放大到14级 map.enableScrollWheelZoom(true); </script>