使用GoogleMaps追踪位置
我们的例子仅在移动设备上有效。你当然可以为了演示人为制造“移动”，
宁波网站建设认为但只有当你在移动过程中使用着浏览器，并希望能精确判断位置时才能真实感受到“追踪位置”这一概念。以下体验中的重要道具是一部Android智能手机，它在髙速公路驾驶过程中显示着HTML页面。
由GoogleMaps判定的最后5个位置被标记于地图上。当用户离开屏幕显示的地图区域时，地图将以下一个点为中心展开。
我们再次使用window.onload完成GeolocationAPI的调用，其代码如下：
varwatchID=navigator.geolocation.watchPosition(moveMe,posError,{enableHighAccuracy:true}
)；
真正的工作在函数moveMe()中进行：
functionmoveMe(position){
latlng=newgoogle.maps.LatLng(position.coords.latitude,position.coords.longitude);bounds=map.getBounds();map.setZoom(lb);if(!bounds.contains(latlng)){map.setCenter(latlng);if(marker.length〉=maxMarkers){m=marker.snift();if(m){m.setMap();marker.push(newgoogle.maps.Marker({position:latlng,map:map,title:position.coords.accuracy+Mmlat:"+position.coords.latitude+Mion:"+position.coords.longitude〉}));变量latlng被创建为GoogleMaps的LatLng对象，当前坐标被传递至此对象。若当前位置不在显示区域Obounds.contains(latlng))，地图将重新围绕当前点展开。在脚本一开始，marker数组及变量maxMarkers都已经被定义为全局变董，并被陚值为5。若marker数组包含多于5个元素，第一个元素将通过shift函数从数组中被移除，并通过调用setMapO,在不需要提供更多参考标记的情况下从地图中删去。最后，数组中将添加一个标记当前位置的新marker对象。
案例：Geonotes
这个例子是携带一部新智能手机进行海外旅行：我们要为这趟旅行设计一本数字旅行日记，自动记录所有到过地方的地理坐标，并将它们显示在地图上。高昂的欧洲数据漫游费用让我们必须为其加人一个HTML5相关技术以减少成本，那就是Web存储(WebStorage)。通过WebStorageAPI,到过的地点被储存在永久性内存(译者注：例如文件缓存、手机记忆卡)中，这样即使在没有数据通信的情况下程序也可以运行。有关WebStorageAPI的更多细节可见第8章。
操作
这个程序结构非常简单(见图):你可以在文本框中输人日记注释。新的HTML5占位符(placeholder)属性让浏览器显示一个输入新消息的邀请。若你已输人注释，右边区域将显示一幅GoogleMaps的地图截选。到过的地点列表位于下方，其不仅包括自己填写的文本注释，同时还包括了位置、达到时间、以及与当前位置的距离。你还可以选择删除注释，或是在GoogleMaps上显示相应详细位置。如图所示，地图上到过的地方其地理位置都通过典型的Google标记注明。位置标记旁边的圆形表示该地点的精确位置。
没人会乐意为了开发程序边走路边写代码，因此我们需要用到Firefox插件Geolacater。在此前的节中已经介绍过它了。你可以在插件中储存几个位置，以便在家中仍然能测试程序。原则上讲，该程序应该在带GPS的智能手机上使用，而Android系统手机及iPhone都能完全满足这个条件。
为了能马上测试该程序，你可以采用demo数据。此类数据部分为虚构，部分为真实地点，由程序作者所记录。
本文由乐华网络编辑，转载请注明出处
宁波网站建设www.leseo.net
