你好世界

開始學習百度地圖API最簡單的方式是看一個簡單的範例。以下程式碼建立了一個地圖並以天安門作為地圖的中心：

<!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=2.0&ak=您的密钥">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
</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>

下面我們分步向您介紹：

準備頁面

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

<!DOCTYPE html>

您也可以根據需要選擇其他類型的文件聲明，這樣瀏覽器會以標準的方式對頁面進行渲染，確保頁面最大的相容性。我們不建議您使用quirks模式進行開發。

下面我們會新增一個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檔案

使用V1.4及以前版本的引用方式：

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

命名空間 API使用BMap作為命名空間，所有類別均在該命名空間之下，例如：BMap.Map、BMap.Control、BMap.Overlay。

建立地圖實例

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

#位於BMap命名空間下的Map類別表示地圖，透過new運算子可以建立一個地圖實例。其參數可以是元素id也可以是元素物件。

注意在呼叫此建構函式時應確保容器元素已經新增到地圖上。

建立點座標

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

#這裡我們使用BMap命名空間下的Point類別來建立一個座標點。 Point類別描述了一個地理座標點，其中116.404表示經度，39.915表示緯度。

地圖初始化

###

map.centerAndZoom(point, 15);

#######

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

地圖配置與操作

地圖被實例化並完成初始化以後，就可以與其進行互動了。 API中的地圖物件的外觀與行為與百度地圖網站上互動的地圖非常相似。它支援滑鼠拖曳、滾輪縮放、雙擊放大等互動功能。您也可以修改配置來改變這些功能。例如，地圖預設情況下不支援滑鼠滾輪縮放操作，因為這樣可能會影響整個頁面的使用者體驗，但是如果您希望在地圖中使用滑鼠滾輪控制縮放，則可以呼叫map.enableScrollWheelZoom方法來開啟。配置選項可以在Map類別參考的配置方法一節中找到。

此外，您還可以透過程式設計的方式與地圖互動。 Map類別提供了若干修改地圖狀態的方法。例如：setCenter()、panTo()、zoomTo()等等。

下面範例顯示一個地圖，等待兩秒鐘後，它會移動到新中心點。 panTo()方法將讓地圖平滑移動至新中心點，如果移動距離超過了當前地圖區域大小，則地圖會直跳到該點。

var map = new BMap.Map("container");    
var point = new BMap.Point(116.404, 39.915);    
map.centerAndZoom(point, 15);    
window.setTimeout(function(){  
    map.panTo(new BMap.Point(116.409, 39.918));    
}, 2000);

你好世界

地圖配置與操作

PHP中文網