基于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 getLocation(){

    if(!navigator.geolocation){

       alert("can not use geolocation");

       return;

    }

navigator.geolocation.getCurrentPosition(locSuccess,locFail,{enableHighAccuracy:false});

}

 

成功获得地理位置，执行locSuccess函数

functionlocSuccess(position){

    trNotes.lat=position.coords.latitude;

    trNotes.lng=position.coords.longitude;

}

 

如果获得地理位置失败，执行locFail函数

functionlocFail(error){

    varmsg="Cannot determine location.";

    if(error.code==error.PERMISSION_DENIED)

    {

       msg+="Geolocation is disabled.";

    }

    try{

       navigator.notification.alert(mag,null,"Geolocation");

    }catch(e){

       alert(msg);

    }

}

3、PhoneGap调用设备相机

使用PhoneGap提供的navigator.camera.getPicture函数获得设备的照片或者通过设备的相机来拍摄照片。

function getPhoto(){

  //alert("click getPhoto");

  if(!navigator.camera) {

     alert("camera can not use");

     return;

  }

 

//Camera.DestinationType.FILE_URI表示返回照片的文件路径，如果//Camera.DestinationType.DATA_URL表示返回以base64编码的字符串

 

  navigator.camera.getPicture(onSuccess,onFail,{ quality:50,destinationType:Camera.DestinationType.FILE_URI });

 

拍照成功后，执行onSuccess函数

  functiononSuccess(imageData) {

     //alert("camer successful!!!");

     //alert(imageData);

     varnewnote=$("#newNote");

     varsrc=imageData;

     //var src="data:image/jpeg;base64," +imageData;

     varimg=$("#myPhoto");

     img.attr("src",src);

     img.css("display","block");

     //var img="<imgsrc="+src+"/>";

     //newnote.append(img);

     newnote.listview("refresh");

   

  }

 

  functiononFail(message) {

     alert(' carema Failedbecause: '+message);

  }

调用相机

写日记

 

4、ArcGIS Javascript API实现日记标示

主要用于日记在地图上的展示，将存储的地理位置坐标，日记的标题、内容和照片，构建成ArcGIS Javascript API支持的Graphic，并显示到地图上。

    if(row.latitude){

       varpt=esri.geometry.geographicToWebMercator(newesri.geometry.Point([row.longitude,row.latitude],newesri.SpatialReference({wkid:4326})));

                     varsymbol=newesri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE,12,

                      newesri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,

                          newdojo.Color([210,105,30, 0.5]),8),

                          newdojo.Color([210,105,30,0.9]));

       

                     varattr={"title":title,"content":content,"entered":entered,"updated":updated};

 

                      /*var infoTemplate = new esri.InfoTemplate("Attributes","<b>NOTE Name: </b><b>title</b><br/>content<br><img></img><br>entered");*/

                     varinfoTemplate=newesri.InfoTemplate("日记信息","<b>标题: </b><b>${title}</b><br/><b>内容:</b>${content}<br><img style='height:200px;width:200px;'src="+photo+"></img><br><b>时间: </b>${entered}");

                      varg=newesri.Graphic(pt,symbol,attr,infoTemplate);

                     

                      dojo.connect(g,"onClick",function(evt){

                         alert("graphic click"); 

                         vargraphic=evt.graphic;

//                           if(map.infoWindow.isShowing) {

//                                map.infoWindow.hide();

//                            }

                            

                             map.infoWindow.clearFeatures();

                             map.infoWindow.setFeatures([graphic]);

                             map.infoWindow.show(evt.mapPoint);

                            

                          });

                     

                      map.graphics.add(g);

                  }

在地图上显示

详细信息

5、PhoneGap打包不同平台上的安装包

打包为native App，方法和步骤详见：http://www.phonegap.cn/?page_id=442

在IOS模拟器中的系统截图：

系统主界面

 

地图显示

日记列表

日记信息-编辑-删除

【源码下载地址】

iOS版：http://download.youkuaiyun.com/detail/arcgis_mobile/4209747

Android版：http://download.youkuaiyun.com/detail/arcgis_mobile/4209754