baidu-map

 1 var map = new BMap.Map("wcp"); // 创建Map实例
 2 map.centerAndZoom(new BMap.Point(9.1234695911407, 45.4779927836), 11); // 初始化地图,设置中心点坐标和地图级别
 3 //添加地图类型控件
 4 map.addControl(new BMap.MapTypeControl({
 5     mapTypes: [
 6         BMAP_NORMAL_MAP,
 7         BMAP_HYBRID_MAP
 8     ]
 9 }));
10 map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
11 map.enableScrollWheelZoom(true);

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 7     <link rel="stylesheet" href="./index.css">
 8     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=SYl5BbYhh2lYghAIi9TsF9Vw80mE4NT2"></script>
 9     <title>百度地图</title>
10 </head>
11 <body>
12     <div id="wcp">
13
14     </div>
15     <script src="./map.js"></script>
16 </body>
17 </html>

body,html,#wcp {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin:0;
    font-family:"微软雅黑";
}