開發(fā)S40Web Map 應(yīng)用
本文作者在在QML中使用Nokia Maps Image API獲取地圖一文中，介紹了Nokia Maps Image API在有網(wǎng)絡(luò)環(huán)境的條件下，就可以用簡單的QML代碼開發(fā)出地圖應(yīng)用。實(shí)際上QML中使用的Maps Image API在S40 Web App中一樣是可用的，使用方法一樣。另一位作者在Geolocation API介紹 一文中也介紹了使用Geolocation API開發(fā)的方法，在Nokia WebTool 1.5版本以后就支持這個(gè)API的開發(fā)。
本文將介紹Nokia Location Platform中提供的Maps API for JavaScript，它提供的接口使我們在S40 Web App開發(fā)中用一些簡單的函數(shù)調(diào)用即可實(shí)現(xiàn)一個(gè)地圖應(yīng)用。使用以上哪種方法開發(fā)當(dāng)然取決于開發(fā)者自身的習(xí)慣和喜好。下面我們就以一個(gè)Map例程來說明其中一些API的使用。
實(shí)現(xiàn)
開發(fā)環(huán)境： Nokia Web Tools 1.5 先注冊成為Nokia Developer ,并為你的應(yīng)用進(jìn)行注冊，這個(gè)過程并不復(fù)雜，在你打開相關(guān)文檔時(shí)會自動(dòng)彈出注冊的窗口。
新建一個(gè)Basic web app project with style工程，命名為testMap。要使用Nokia Location Platfrom 中的接口，需要在head中引入js庫：
- <script src="http://api.maps.nokia.com/2.2.0/jsl.js" type="text/javascript" charset="utf-8"> </script>
本例中將在滿屏來顯示地圖，所以在body中這樣定義：
- <body>
- <div id="mapContainer" style="width:240px; height:320px;"></div>
- </body>
在css中定義body 、mapContainer的樣式：
<body>
<div id="mapContainer" style="width:240px; height:320px;">
</div>
</body>
通過前面這些步驟我們已經(jīng)在屏幕上進(jìn)行了布局，下面開始使用JS庫中的DisPlay接口，在屏幕上顯示出一個(gè)基本的地圖：
<script type="text/javascript">
// Set up is the credentials to use the API:
nokia.Settings.set("appId", "scVPyrvUFDokWQurWyRa"); //注冊后系統(tǒng)分配的應(yīng)用Id
nokia.Settings.set("authenticationToken", "MMgcc66XlTB3srHc2D1yUQ");
var map = new nokia.maps.map.Display(
document.getElementById("mapContainer"), {
components: [
new nokia.maps.map.component.Behavior()],
// 地圖的放大倍數(shù)
'zoomLevel': 15,
//地圖的中心坐標(biāo)，北京市經(jīng)緯度
'center': [39.90, 116.38]
});
</script>
在模擬器上預(yù)覽效果，可以看到一幅簡單的地圖：
地圖必須要具有放大縮小、方式切換等功能，所以我們在Display方法中加入對這幾個(gè)功能的支持：
...
components:[
...
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.Overview(),
new nokia.maps.map.component.TypeSelector(),
new nokia.maps.map.component.ScaleBar()
]
可以看到此時(shí)的地圖上加入了放大縮小按鈕以及地圖視圖和衛(wèi)星視圖的切換：
我們還可以在地圖中加入Marker等 ：
...
var marker = new nokia.maps.map.StandardMarker([39.90, 116.38], {
text: "Hi!", // marker 標(biāo)簽
draggable: true //可拖動(dòng)
});
map.objects.add(marker);
map.objects.add(new nokia.maps.map.Circle(
// 圓的中心點(diǎn)
[39.90, 116.38],
// 半徑為400米
400,
{
color: "#823f",
fillColor: "#2387",
width: 2
}
));
最終的效果如圖：
用例下載：Media:Testmap.wgt
