百度地图——显示地图

一、需要去官网申请一个密钥（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;}