APICloud是一個利用網頁語言做APP的一個平臺吧，這裏主要講述下在利用APICloud做地圖類應用時如何調用bmap模塊，相應的其他模塊的調用方式也是相同的，下面的內容就假設我們都已經熟悉了APICloud基本使用及一定的H5基礎。
一、利用APICloud創建一個新的應用
首先我們在開發端創建一個名爲“LoveMap”的新應用，創建結束後將爲下述樣式：
上述信息在創建完成應用後index文件來寫入我們APP打開後的第一個界面，而HTML文件夾用來存放所寫的子界面文件等，image用來存放界面中所需要的圖片。
二、在index界面寫個比較醜的按鈕界面
先貼下代碼：
<body> <!--界面的主要內容部分，上述爲相對應的CSS樣式-->
<div id="wrap">
<div id="header">
<h1>百度模塊調用</h1> <!--頁面頭部所顯示的文字字樣-->
</div>
<div class="main" id="main">
<a class="anniu" id="anniu" tapmode="tap-active" onclick="openMap();">登錄</a><!--在主界面部分寫入登錄字樣-->
<a class="anniu" id="anniu" tapmode="tap-active" onclick="openMap();">登錄</a>
<a class="anniu" id="anniu" tapmode="tap-active" onclick="openMap();">登錄</a>
</div>
<div id="footer">
<h5>Copyright ©<span id="year"></span> </h5><!--在主界面部分底部部分-->
</div>
</div>
</body>顧名思義，上述就是寫了一個很醜的登錄按鈕，當然上述a元素所包含的內容表示一行，該行的作用就是在類main中放置了三個相當於按鈕的行，爲了描述a的作用就直接複製了三次，這樣就能看到我們很醜的按鈕就建立成功了。該部分的內容讀者可以採用相應的CSS進行更美觀化的處理，上述的按鈕在樣式上只是設置了簡單的色彩及觸發後的變化，很醜的樣式如下：
上面就是我們所定義的按鈕，接下來就是本文重點提到的模塊的引用了。
二、激活我們的按鈕
我們都比較熟悉的內容就是做PPT時候的超鏈接或者換頁這樣的功能，簡單的來說index界面的效果也可以這麼理解，上面我們定義了按鈕，然後如何調用我們的百度地圖呢，答案很簡單，我們爲“登錄”按鈕賦予一定的功能。
首先回到上述按鈕的代碼中：
<a class="anniu" id="anniu" tapmode="tap-active" onclick="openMap();">登錄</a>其中onclick的作用就相當於超鏈接了，這裏它的作用就是當我們點擊“登錄”後就會觸發openMap（）函數的執行，接下來爲了使得我們能夠打開並關閉百度地圖模塊，我們不能直接在openMap（）中就直接打開地圖，這裏我們將地圖模塊加載到另外一個網頁中，展示到APP中就是另外一個界面內，接下來我們利用APICloud所提供的openWindow（）創建下一個界面：
function openMap(){ //定義登錄按鈕點擊後的界面
api.openWin({
name: 'MAP',
url: 'html/main.html',
rect: {
x:0,
y:48,
w:'auto',
h:'auto'
}
});
};這樣就爲“登錄”附加好了功能，然後就是如何將百度地圖模塊搭載到main界面內了。首先提一點，就是在APICloud開發中該自定義函數要放置在apiready外面，如果放到裏面就會自動執行了，那麼你所定義的按鈕界面就曇花一現，打開APP的瞬間就會自動跳轉到main界面了。
三、調用bmap模塊
百度地圖模塊的調用之前記得先去開發控制檯模塊部位添加bmap模塊，
然後去百度地圖開發網站爲你自己的APP申請百度地圖的AK，在config中完成相應的配置。
準備工作完成後我們就能夠在main界面調用百度地圖模塊了，這裏我們先完成了地圖模塊調用的基本操作，就是地圖模塊調用後全屏打開地圖，並展示用戶所在位置的附近地圖情況，這一點我們從開發文檔中將看到是人爲設定的地圖中心，顯然是不合理的，所以正常使用下的形式如下代碼所示：
apiready = function(){
var map = api.require('bMap'); //申明百度地圖模塊
var winHeight = api.winHeight;
var winWidth = api.winWidth; //賦予變量窗口寬度或者高度值
var lon_user;
var lat_user;
map.open({
rect:{
x: 0,
y: 0,
w: 'auto',
h: winHeight //761 //-78
},
zoomLevel:15,
showUserLocation : true
},function(ret){
map.getLocation({
accuracy: '10m',
autoStop:true,
filter: 1
},function(ret){
var sta = ret.status;
lon_user = ret.lon;
lat_user = ret.lat;
map.setCenter({
coords: {
lon: lon_user,
lat: lat_user
},
animation: true
});
});
});
};上述我們就將相應的地圖調用的功能放到apiready函數中，目的就是點擊完“登錄”後所轉到的main界面就將全屏加載地圖了。
上面用戶所在位置的小藍點被我拖走了，好了上述代碼的主要功能可以從開發文檔中看到，這裏只是個簡單的應用，爲了更清晰的熟悉main界面如何搭載的地圖模塊，下面給下完整的代碼：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<style>
#con{
margin: 10px;
font-size: 24px;
}
ul{
margin-bottom: 10px;
}
ul li{
margin: 5px 10px;
padding: 5px;
color: #000;
word-wrap: break-word;
}
</style>
</head>
<body>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
var map = api.require('bMap'); //申明百度地圖模塊
var winHeight = api.winHeight;
var winWidth = api.winWidth; //賦予變量窗口寬度或者高度值
var lon_user;
var lat_user;
map.open({
rect:{
x: 0,
y: 0,
w: 'auto',
h: winHeight //761 //-78
},
zoomLevel:15,
showUserLocation : true
},function(ret){
map.getLocation({
accuracy: '10m',
autoStop:true,
filter: 1
},function(ret){
var sta = ret.status;
lon_user = ret.lon;
lat_user = ret.lat;
map.setCenter({
coords: {
lon: lon_user,
lat: lat_user
},
animation: true
});
});
});
};
</script>
</html>