基于PhoneGap+JQuery Mobile+ArcGISJavascript API实现

最新推荐文章于 2021-07-27 08:47:00 发布

blacksource

最新推荐文章于 2021-07-27 08:47:00 发布

阅读量1.7k

点赞数

分类专栏：手机应用

手机应用专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一款地图日记应用，利用PhoneGap调用移动设备的GPS和相机，结合ArcGISJS API在地图上展示日记内容、照片和地理位置。应用实现了地图展示、写日记和日记管理三大功能，包括当前地理位置获取、设备相机使用、日记列表展示、详细信息浏览及编辑删除操作。使用JQueryMobile进行界面设计，并提供了不同平台的打包方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【关键思路】

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>

</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}");