開發S40Web Map 應用
本文作者在在QML中使用Nokia Maps Image API獲取地圖一文中，介紹了Nokia Maps Image API在有網絡環境的條件下，就可以用簡單的QML代碼開發出地圖應用。實際上QML中使用的Maps Image API在S40 Web App中一樣是可用的，使用方法一樣。另一位作者在Geolocation API介紹 一文中也介紹了使用Geolocation API開發的方法，在Nokia WebTool 1.5版本以后就支持這個API的開發。
本文將介紹Nokia Location Platform中提供的Maps API for JavaScript，它提供的接口使我們在S40 Web App開發中用一些簡單的函數調用即可實現一個地圖應用。使用以上哪種方法開發當然取決于開發者自身的習慣和喜好。下面我們就以一個Map例程來說明其中一些API的使用。
實現
開發環境： Nokia Web Tools 1.5 先注冊成為Nokia Developer ,并為你的應用進行注冊，這個過程并不復雜，在你打開相關文檔時會自動彈出注冊的窗口。
新建一個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>
通過前面這些步驟我們已經在屏幕上進行了布局，下面開始使用JS庫中的DisPlay接口，在屏幕上顯示出一個基本的地圖：
<script type="text/javascript">
// Set up is the credentials to use the API:
nokia.Settings.set("appId", "scVPyrvUFDokWQurWyRa"); //注冊后系統分配的應用Id
nokia.Settings.set("authenticationToken", "MMgcc66XlTB3srHc2D1yUQ");
var map = new nokia.maps.map.Display(
document.getElementById("mapContainer"), {
components: [
new nokia.maps.map.component.Behavior()],
// 地圖的放大倍數
'zoomLevel': 15,
//地圖的中心坐標，北京市經緯度
'center': [39.90, 116.38]
});
</script>
在模擬器上預覽效果，可以看到一幅簡單的地圖：
地圖必須要具有放大縮小、方式切換等功能，所以我們在Display方法中加入對這幾個功能的支持：
...
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()
]
可以看到此時的地圖上加入了放大縮小按鈕以及地圖視圖和衛星視圖的切換：
我們還可以在地圖中加入Marker等 ：
...
var marker = new nokia.maps.map.StandardMarker([39.90, 116.38], {
text: "Hi!", // marker 標簽
draggable: true //可拖動
});
map.objects.add(marker);
map.objects.add(new nokia.maps.map.Circle(
// 圓的中心點
[39.90, 116.38],
// 半徑為400米
400,
{
color: "#823f",
fillColor: "#2387",
width: 2
}
));
最終的效果如圖：
用例下載：Media:Testmap.wgt
