设为首页收藏本站

 找回密码
 注册
搜索
52RD研发论坛»论坛 › 软件平台研发论坛 › Android › Android 地图导航应用实现，用Rexsee做的
返回列表 发新帖回复
查看: 1156|回复: 2

[讨论] Android 地图导航应用实现，用Rexsee做的

[复制链接]
发表于 2012-3-23 17:17:10 | 显示全部楼层 |阅读模式
　　这是一个完整的地图导航应用实现，用的是开源的Rexsee平台，HTML和JS，而非Java。直接切入正题：

　　首先是首页框架，直接使用HTML写：

　　<html>

　　        <head>

　　        <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

　　        <title>地图DEMO</title>

　　        <linkhref="css/index.css"rel="stylesheet"type="text/css"/>

　　        </head>

　　       

　　        <body>

　　       

　　        <divid="toolDiv"><tableheight="100%"width="100%">

　　        <tr>

　　        <tdwidth="60%"><inputid="search"class="inp"value="即时导航"onclick="inputs()"/><imgsrc="images/da_ic_menu_search.png"width="15%"height="50%"onclick="routeImd()"/></td>

　　        <tdwidth="13%"><imgsrc="images/ic_menu_places.png"width="90%"height="50%"onclick="ctlPoi()"/></td>

　　        <tdwidth="13%"><imgsrc="images/ic_menu_layers.png"width="90%"height="50%"onclick="setLayer()"/></td>

　　        <tdwidth="13%"><imgsrc="images/ic_menu_mylocation.png"width="90%"height="50%"onclick="javascript:locations()"/></td>

　　        </tr>

　　        </table>

　　        </div>

　　        <divid="mapDiv"></div>

　　        <divid="menuDiv"><tablecellpadding="0"cellspacing="0"width="100%"height="100%">

　　        <tdwidth=20%style="-webkit-border-top-left-radius:20px;-webkit-border-bottom-left-radius:20px;background:-webkit-gradient(linear,00,0100%,from(#CCC),to(#fff))"><imgsrc="images/ic_menu_reverse_directions.png"width="80%"height="60%"onclick="javascript:rexseeGps.openSettings()"/></td>

　　        <tdwidth=20%style="background:-webkit-gradient(linear,00,0100%,from(#CCC),to(#fff))"><imgsrc="images/ic_menu_see_map.png"width="80%"height="60%"onclick="getRoute()"/></td>

　　        <tdwidth=20%style="background:-webkit-gradient(linear,00,0100%,from(#CCC),to(#fff))"><imgsrc="images/ic_menu_edit.png"width="80%"height="60%"onclick="openSetWindow()"/></td>

　　        <tdwidth=20%style="background:-webkit-gradient(linear,00,0100%,from(#CCC),to(#fff))"><imgsrc="images/ic_menu_terms.png"width="80%"height="60%"onclick="javascript:setCusPoi()"/></td>

　　        <tdwidth=20%style="-webkit-border-top-right-radius:20px;-webkit-border-bottom-right-radius:20px;background:-webkit-gradient(linear,00,0100%,from(#CCC),to(#fff))"><imgsrc="images/ic_menu_walking_steps.png"width="80%"height="60%"onclick="javascript:rexseeApplication.confirmExit();"/></td>

　　        </table>

　　        </div>

　　        <scriptsrc="js/javascript.js"type="text/javascript">

　　        </script>

　　        </body>

　　        </html>

　　       

　　做好框架之后就要开设设置地图插件的位置了，为了做成全适配型的应用，所以插件位置和框架体的高度都必须是算出来的。所以这里用的都是百分比。

　　至于地图插件，也需要去算。为了不收屏幕密度影响，可以用window.body.clientWIdth和window.body.clientHeight来获取宽度和高度，这样获取的宽度和高度在任何密度的屏幕上都一样。

　　当获取到宽和高后，需要减去框架部分的高度。当然，用1减去上下部分的百分比再乘以高度就可以了。这里的公式应该是有点错误的，当时当时测试3种屏幕的设备都没有问题，所以就没改。理论上来说，如果不是全屏的话，需要减去通知栏的高度。（PS:通知栏高度需要计算密度）。具体代码如下：（PS：没有减去通知栏高度，用了个莫名其妙的公式搞定了…不知道当时怎么得出来的公式）

　　rexseeMapAbc.start('window-cancelable:false;window-moveable:false;width:'+Math.round(document.body.clientWidth)+';height:'+Math.round(document.body.clientHeight*(0.8+(rexseeScreen.getScreenDensityScale()-1)*0.1)+2)+';window-modeless:true;window-dim-amount:0;top:'+Math.round((document.body.clientHeight*0.12+2)*rexseeScreen.getScreenDensityScale())+';');

　　完成好布局之后，就可以开始写逻辑代码了，首先编写菜单：（DEMO中倒数第二个本来是关于信息，好来为了测试自定义标记兴趣点给改了）

　　functionini(){

　　rexseeMenu.clearOptionsMenu();

　　rexseeScreen.setScreenOrientation("portrait");

　　rexseeTitleBar.setStyle('visibility:hidden;');

　　rexseeStatusBar.setStyle('visibility:hidden;');

　　        rexseeMapAbc.start('window-cancelable:false;window-moveable:false;width:'+Math.round(document.body.clientWidth)+';height:'+Math.round(document.body.clientHeight*(0.8+(rexseeScreen.getScreenDensityScale()-1)*0.1)+2)+';window-modeless:true;window-dim-amount:0;top:'+Math.round((document.body.clientHeight*0.12+2)*rexseeScreen.getScreenDensityScale())+';');

　　rexseeMenu.create('setMenu','label:设置');

　　rexseeMenu.addItem('setMenu','javascript:setPoi()','label:设置兴趣点;');

　　rexseeMenu.addItem('setMenu','javascript:setRole()','label:设置路径规划原则;');

　　rexseeMapAbc.requestPoi('',poi);

　　rexseeMapAbc.zoom(24);

　　}

　　functionopenSetWindow(){

　　rexseeMenu.open("setMenu");

　　}

　　varpoi="";

　　if(rexseePreference.get("poi")!=null&&rexseePreference.get("poi")!=""){

　　poi=rexseePreference.get("poi");

　　}

　　functionsetPoi(){

　　varpois=prompt('checkbox','title=兴趣点设置;options=加油站|停车场|餐厅|住宿|娱乐|景点|医院');

　　pois=eval('('+pois+')');

　　varpoi="";

　　for(vari=0;i<pois.length;i++){

　　poi+=pois;

　　if(i!=pois.length-1)

　　poi+="+";

　　}

　　rexseePreference.set("poi",poi);

　　rexseeMapAbc.requestPoi('',poi);

　　}

　　functionsetRole(){

　　role=prompt('radio','title=行驶方式;defaultValue=BusDefault;options=BusDefault|BusLeaseWalk|BusMostComfortable|BusSaveMoney|DrivingDefault|DrivingLeaseWalk|DrivingMostComfortable|DrivingSaveMoney|WalkDefault');

　　rexseePreference.set('role',role);

　　}

　　再看看功能代码。关于定位：

　　vargps=true;

　　functionlocations(){

　　if(testMode){

　　if(gps){

　　rexseeMapAbc.showCurrentLocation();

　　rexseeDialog.toast('开始位......');

　　gps=false;

　　}else{

　　rexseeMapAbc.hideCurrentLocation();

　　gps=true;

　　}

　　}else{

　　if(gps){

　　if(rexseeGps.isReady()){

　　rexseeMapAbc.showCurrentLocation();

　　rexseeDialog.toast('开始定位......');

　　gps=false;

　　}else{

　　rexseeGps.openSettings();

　　}

　　}else{

　　rexseeMapAbc.hideCurrentLocation();

　　gps=true;

　　}

　　}

　　}

　　//测试用模式定位

　　functionrouteImd(){

　　if(testMode)

　　{

　　routeim=true;

　　locations();

　　}else{

　　if(rexseeGps.isReady()){

　　routeim=true;

　　locations();

　　}else{

　　rexseeDialog.toast('请打开GPS');

　　}

　　}

　　}

　　另一段，报告所在的位置：

　　varnl="";

　　varnla="";

　　functiononGpsLocationChanged(time,accuracy,longitude,latitude,speed,bearing,altitude)

　　{

　　nl=longitude+"";

　　nla=latitude+"";

　　//alert(nl+""+nla);

　　/*vartemp=eval('('+rexseeMapAbc.getAddressFromRawGpsLocation(l,la,1)+')');

　　l=temp[0].Longitude;

　　la=temp[0].Latitude;*/

　　rexseeMapAbc.setCenter(nl,nla);

　　rexseeMapAbc.getCenter();

　　if(routeim){

　　alert('开启即时导航');

　　routeim=false;

　　vartargetName=document.getElementById("search").value;

　　vartempTar=eval('('+rexseeMapAbc.getAddressFromLocationName(targetName,1)+')');

　　vartlong=tempTar[0].Longitude+"";

　　vartlat=tempTar[0].Latitude+"";

　　rexseeMapAbc.requestRoute('routeRequest01',nl,nla,tlong,tlat,role);

　　}

　　if(notices){

　　//if((longitude>121.3339863&&longitude<121.573863)&&(latitude>31.156374&&latitude<31.334374)){

　　if(true){

　　rexseeNotification.show('id=2;ticker=地方提醒;title=Rexsee提醒;message=您已到达凤凰置地广场附近。;');

　　}

　　}

　　}

　　varnotices=false;

　　初始地到目的地导航：

　　functiongetRoute()

　　        {

　　        rexseeMapAbc.hideRoute();

　　        varplaces=eval('('+prompt('prompt','title=导航输入框;message=请输入起始地和目的地：;options=起始地：|目的地：;defaultValue=北京市北京西站|北京市北京南站;inputType=text|text;')+')');

　　        varstartPlace=places[0];

　　        varendPlace=places[1];

　　       

　　vartempsp=eval('('+rexseeMapAbc.getAddressFromLocationName(startPlace,1)+')');

　　vartempep=eval('('+rexseeMapAbc.getAddressFromLocationName(endPlace,1)+')');

　　        varsplong=tempsp[0].Longitude+"";

　　        varsplat=tempsp[0].Latitude+"";

　　        //alert(splong+""+splat);

　　        vareplong=tempep[0].Longitude+"";

　　        vareplat=tempep[0].Latitude+"";

　　        rexseeMapAbc.requestRoute('routeRequest01',splong,splat,eplong,eplat,role);

　　        }

　　       

　　        functiononRouteReady(id){

　　        //alert(rexseeMapAbc.getRequesedRoute(id));

　　vartemps=rexseeMapAbc.getRequestedRoute(id);

　　//temps=temps.replace(/\r\n","");

　　temps=temps.replace(/\n/g,"");

　　temps=temps.replace(/\r/g,"");

　　//alert(temps);

　　temps=eval('('+temps+')');

　　        //alert(temps.length);

　　varlongs=temps[0].startLongitude;

　　varlat=temps[0].startLatitude;

　　        //alert(long+""+lat);

　　rexseeMapAbc.setCenter(longs,lat);

　　rexseeMapAbc.showRoute(id,0)

　　        }

　　所在位置到目的地导航：

　　functioninputs(){

　　document.getElementById("search").value=prompt('prompt','title=输入框;message=请输入要去的地方：;defaultValue=北京市北京西站;singleLine=false;');

　　}

　　因为是通用事件，写1次就好:functiononRouteReady(id){

　　//alert(rexseeMapAbc.getRequesedRoute(id));

　　vartemps=rexseeMapAbc.getRequestedRoute(id);

　　//temps=temps.replace(/\r\n","");

　　temps=temps.replace(/\n/g,"");

　　temps=temps.replace(/\r/g,"");

　　//alert(temps);

　　temps=eval('('+temps+')');

　　//alert(temps.length);

　　varlongs=temps[0].startLongitude;

　　varlat=temps[0].startLatitude;

　　//alert(long+""+lat);

　　rexseeMapAbc.setCenter(longs,lat);

　　rexseeMapAbc.showRoute(id,0)

　　}

　　开启/关闭路况:（暂无路况清除功能）

　　functionsetLayer(){

　　if(!rexseeMapAbc.isTraffic()){

　　rexseeDialog.toast('开启路况图层');

　　rexseeMapAbc.setTraffic(true);

　　}else{

　　rexseeDialog.toast('关闭路况图层');

　　rexseeMapAbc.setTraffic(false);

　　}

　　}

　　兴趣点开关：

　　functionsetCusPoi(){

　　        rexseeMapAbc.setCenter('116.45508','39.84229');

　　        rexseeMapAbc.clearCustomizedPoi();

　　        try{

　　        //rexseeMapAbc.addCustomizedPoi('id2','','','','','','','116.45508','39.84229','http://mapabc.sinaapp.com/static/v1.0/images/geo_icon.png',13,18);

　　        rexseeMapAbc.addCustomizedPoi('id','title','snippet','adCode','tel','typeCode','typeDes','116.45508','39.84229','images/a.jpg',13,18);

　　        rexseeMapAbc.showCustomizedPoi();

　　        }catch(e){

　　        alert(e);

　　        }

　　        }

　　       

　　        varpageCount=0;

　　       

　　        functiononPoiReady()

　　        {

　　        pageCount=rexseeMapAbc.getRequestedPoiPageCount();

　　       

　　        }

　　        vars=1;

　　        functionshowPoi(){

　　        if(s<pageCount){

　　        hidePoi();

　　        rexseeMapAbc.showPoi(s);

　　        s++;

　　        if(s==pageCount-1){s=1;ctl=false;}

　　        }

　　        }

　　       

　　        functionhidePoi(){

　　        rexseeMapAbc.hidePoi();

　　        }

　　        varctl=true;

　　        functionctlPoi(){

　　        if(ctl){

　　        showPoi();

　　        rexseeDialog.toast('开启兴趣点显示,长按消除');

　　        }else{

　　        hidePoi();

　　        ctl=true;

　　代码有点多，仔细看看吧~~相关的应用截图也很多，去这个链接看吧：http://www.rexsee.com/CN/bbs/thread/2011-10-14/177.html
回复

使用道具 举报

发表于 2012-3-24 12:20:01 | 显示全部楼层
有最终版应用么？发个APK出来吧，Rexsee不是说可以直接编译成APK的嘛
点评回复

使用道具 举报

发表于 2012-3-24 10:27:57 | 显示全部楼层
收了，说的很详细，要是能多一些关于Rexsee的入门指导就好了，网上找不到，它的社区也不多
点评回复

使用道具 举报

返回列表 发新帖 回复
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

Archiver|手机版|小黑屋|52RD我爱研发网 ( 沪ICP备2022007804号-2 )

GMT+8, 2024-11-23 12:45 , Processed in 0.049125 second(s), 16 queries , Gzip On.

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表