中国领先的IT技术网站
|
|

开发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 Developer|2013-01-25 13:52

Tech Neo技术沙龙 | 11月25号,九州云/ZStack与您一起探讨云时代网络边界管理实践


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

  1. <script src="http://api.maps.nokia.com/2.2.0/jsl.js" type="text/javascript" charset="utf-8"> </script> 

本例中将在满屏来显示地图,所以在body中这样定义:

  1. <body>       
  2. <div id="mapContainer" style="width:240px; height:320px;"></div>
  3. </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>

在模拟器上预览效果,可以看到一幅简单的地图:

SimpleMap.png

地图必须要具有放大缩小、方式切换等功能,所以我们在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()
]

可以看到此时的地图上加入了放大缩小按钮以及地图视图和卫星视图的切换:

FunMap.png

我们还可以在地图中加入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
}
));

最终的效果如图:

Markerandcircle.png

用例下载:Media:Testmap.wgt

【编辑推荐】

  1. Series 40世上最大的移动平台:你的应用舞台
  2. 诺基亚series 40开发者平台介绍
  3. 诺基亚S40 开发环境搭建简单介绍
【责任编辑:Yeva TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

JSP应用开发详解(第二版)

本书结合JSP和Servlet的最新规范,从基本的语法和规范入手,以经验为后盾,以实用为目标,以实例为导向,以实践为指导,深入浅出地讲解了JS...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊
× CTO训练营(深圳站)