百度地圖——顯示地圖
阿新 • • 發佈：2018-04-13
添加 bsp 技術分享 瀏覽器 設置 tran app none hidden 一、需要去官網申請一個密鑰（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 <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;}
百度地圖——顯示地圖