【关键思路】
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.csdn.net/detail/arcgis_mobile/4209747
Android版:http://download.csdn.net/detail/arcgis_mobile/4209754