【关键思路】

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函数

function

locSuccess(position){

trNotes

.

lat

=

position

.

coords

.

latitude

;

trNotes

.

lng

=

position

.

coords

.

longitud

e

;

}

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

function

locFail(error){

var

msg

=

“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函数

function

onSuccess(imageData) {

//alert(”

camer

successful!!!”);

//alert(imageData);

var

newnote

=

$(

“#newNote”

)

;

var

src

=

imageData

;

//

var src

=”data:image/

jpeg

;base64,” +imageData;

var

img

=

$(

“#myPhoto”

)

;

img

.

attr(

“src”

,

src)

;

img

.

css(

“display”

,

“block”

)

;

//

var img

=”<img

src

=”+

src

+”/>”;

//newnote.append(

img

);

newnote

.

listview(

“refresh”

)

;

}

function

onFail(message) {

alert(

‘ carema Failedbecause: ‘

+

message)

;

}

调用相机

写日记

4、ArcGIS Javascript API实现日记标示

主要用于日记在地图上的展示，将存储的地理位置坐标，日记的标题、内容和照片，构建成

ArcGIS Javascript API

支持的

Graphic

，并显示到地图上。

if

(row

.

latitude){

var

pt

=

esri

.

geometry

.

geographicToWebMercator(

new

esri

.

geometry

.

Point([row

.

longitude

,

row

.

latitude]

,new

esri

.

SpatialReference({wkid

:

4326

})))

;

var

symbol

=

new

esri

.

symbol

.

SimpleMarkerSymbol(esri

.

symbol

.

SimpleMarkerSymbol

.

STYLE_CIRCLE

,

12

,

new

esri

.

symbol

.

SimpleLineSymbol(esri

.

symbol

.

SimpleLineSymbol

.

STYLE_SOLID

,

new

dojo

.

Color([210

,

105

,

30

,

0.5])

,

8)

,

new

dojo

.

Color([210

,

105

,

30

,

0.9]))

;

var

attr

=

{

“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”);*/

var

g

=new

esri

.

Graphic(pt

,

symbol

,

attr

,

infoTemplate)

;

dojo

.

connect(g

,

“onClick”

,function

(evt){

alert

(

“graphic click”

)

;

var

graphic

=

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