旅游日记——基于PhoneGap+JQuery Mobile+ArcGISJavascript API实现

【关键思路】

1）使用PhoneGap来调用移动设备的GPS，相机等设备来获取地利位置和图片、视频等信息；

2）使用ArcGIS JavascriptAPI在地图上显示地理位置和照片，浏览日记内容；

3）使用PhoneGap打包成各个平台上的安装包。

 

【主要功能】

主要实现3个功能：地图展示、写日记和日记管理。

1）写日记

    a)      获得当前的地理坐标；

    b)     获取摄像头，记录日记内容，如日记名称，文字内容，照片。

2）地图展示

    a)      将日记以点的形式标示在地图上；

    b)     触摸日记点显示日记详细信息。

3）日记管理

    a)      以列表的形式显示所有日记；

    b)     点击日记，显示日记的全部信息；

    c)      对日记进行编辑及删除操作。

 

【功能实现】

1、JQueryMobile实现界面设计

由于PhoneGap不提供UI库，所以使用JQueryMobile来设计移动设备的UI。

以下代码是Footbar的UI设计，实现功能切换：

 

    <div data-role="footer"data-id="myfooter"data-position="fixed">

       <div data-role="navbar"data-iconpos="bottom">

           <ul>

              <li><a href="#home"data-icon="grid"data-transition="none"class="ui-btn-active">地图</a></li>

              <li><a href="#new"data-icon="star" data-transition="none">新日记</a></li>

              <li><a href="#travellist"data-icon="gear"data-transition="none">日记列表</a></li>

 

           </ul>

       </div><!-- /navbar -->

 </div>

 

        主界面

 

2、PhoneGap获取地理位置

使用PhoneGap的navigator.geolocation.getCurrentPosition函数来获得当前的地理位置信息。

function getLocati