1. 程式人生 > >百度地圖二次開發——建立Hello World(2)

百度地圖二次開發——建立Hello World(2)

準備頁面

根據HTML標準,每一份HTML文件都應該宣告正確的文件型別,我們建議您使用最新的符合HTML5規範的文件宣告:

<!DOCTYPE html>

適應移動端頁面展示
下面我們新增一個meta標籤,以便使您的頁面更好的在移動平臺上展示。

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  

設定容器樣式
設定容器樣式大小,使地圖充滿整個瀏覽器視窗:

<style type="text/css">  
    html{height:100%}    
    body{height:100%;margin:0px;padding:0px}    
    #container{height:100%}    
</style> 

引用百度地圖API檔案

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的金鑰"></script>

建立地圖容器元素
地圖需要一個HTML元素作為容器,這樣才能展現到頁面上。這裡我們建立了一個div元素。

<div id="container"></div> 

建立地圖例項
位於BMap名稱空間下的Map類表示地圖,通過new操作符可以建立一個地圖例項。其引數可以是元素id也可以是元素物件。

var map = new BMap.Map("container"); 

設定中心點座標
這裡我們使用BMap名稱空間下的Point類來建立一個座標點。Point類描述了一個地理座標點,其中116.404表示經度,39.915表示緯度。(為天安門座標)

var point = new BMap.Point(116.404, 39.915);

注意:在使用百度地圖JavaScript API服務時,需使用百度BD09座標,如使用其他座標( WGS84、GCJ02)進行展示,需先將其他座標轉換為BD09,詳細說明請參考座標轉換說明,請勿使用非官方的轉換方法!!!

地圖初始化,同時設定地圖展示級別
在建立地圖例項後,我們需要對其進行初始化,BMap.Map.centerAndZoom()方法要求設定中心點座標和地圖級別。 地圖必須經過初始化才可以執行其他操作

map.centerAndZoom(point, 15);  

JavaScript API支援iPhone、Android這樣的移動平臺。使用者通過手機瀏覽器就可以訪問由地圖API創建出來的應用。移動平臺的螢幕尺寸通常比PC或筆記本要小,操作方式也有所不同。為了更好的在手機瀏覽器上展示地圖,我們有如下建議:

將地圖容器高設定為100%,使其充滿整個螢幕,或者您也可以計算瀏覽器視窗的大小並進行設定。

新增下面的meta標籤: 這樣做是為了讓頁面以正常比例進行顯示並且禁止使用者縮放頁面的操作。

完整的程式碼

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Hello, World</title>  
<style type="text/css">  
html{height:100%}  
body{height:100%;margin:0px;padding:0px}  
#container{height:100%}  
</style>  
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=nslEI0CTdiMavrwgtP9Av8cbyt5GcXgv">
//v3.0版本的引用方式:src="http://api.map.baidu.com/api?v=3.0&ak=您的金鑰"
</script>
</head>  
 
<body>  
<div id="container"></div> 
<script type="text/javascript"> 
var map = new BMap.Map("container");
// 建立地圖例項  
var point = new BMap.Point(116.404, 39.915);
// 建立點座標  
map.centerAndZoom(point, 15);
// 初始化地圖,設定中心點座標和地圖級別  
</script>  
</body>  
</html>

在這裡插入圖片描述