开发S40Web Map 应用-web应用开发流程

本文作者在在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