一、需要去官网申请一个密钥（ak）地址：http://lbsyun.baidu.com/apiconsole/key?application=key
在这里使用html来进行演示
二、新建一个html文件，然后加入百度地图的API
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 6 <!--这是关于浏览器初始缩放比例和是否允许用户手动缩放设置 不是必须设置--> 7 <title>TestMap</title> 8 <!-- 加入百度地图API --> 9 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script> 10 </head> 11 <body> 12 </body> 13 </html>
三、添加地图容器并为容器设置初始大小
1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 5 <!--这是关于浏览器初始缩放比例和是否允许用户手动缩放设置 不是必须设置--> 6 <title>TestMap</title> 7 <!-- 加入百度地图API --> 8 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script> 9 <style type="text/css"> 10 body, 11 html, 12 #mapView{ 13 width: 100%; 14 height: 100%; 15 overflow: hidden; 16 margin: 0; 17 font-family: "微软雅黑"; 18 } 19 </style> 20 </head> 21 <body> 22 <div id="mapView"></div> 23 </body> 24 </html>
四、创建地图实例并初始化
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 6 <!--这是关于浏览器初始缩放比例和是否允许用户手动缩放设置 不是必须设置--> 7 <title>TestMap</title> 8 <!-- 加入百度地图API --> 9 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script> 10 <style type="text/css"> 11 body, 12 html, 13 #mapView{ 14 width: 100%; 15 height: 100%; 16 overflow: hidden; 17 margin: 0; 18 font-family: "微软雅黑"; 19 } 20 </style> 21 </head> 22 <body> 23 <div id="mapView"></div> 24 <script type="text/javascript"> 25 var map = new BMap.Map("mapView"); 26 //创建点坐标 27 var point = new BMap.Point(116.799642, 36.543993); 28 //初始化地图,设置地图中心点和地图级别 29 map.centerAndZoom(point, 16); 30 31 </script> 32 </body> 33 </html>
五、注意事项：
1.必须要有密钥
2.必须手动给地图显示容器（这里就是div#mapView）指定高度,如果不指定高度会无法显示地图
在这里指定高度的方法是：同时给html,body,#mapView 设置属性 {height: 100%}
1 <style type="text/css"> 2 body, 3 html, 4 #mapView{ 5 width: 100%; 6 height: 100%;/*必须*/ 7 overflow: hidden;/*将超出屏幕的地方隐藏，非必须*/ 8 margin: 0;/*将设置外边距为0，非必须*/ 9 font-family: "微软雅黑";/*设置字体，非必须*/ 10 } 11 </style>
需要注意的地方是，如果你使用了别的插件导致属性 {height: 100%}无效的时候（如使用了min-height属性），那么你就必须给地图容器指定具体的高度，
如{min-height: 500px;}