设为首页收藏本站

 找回密码
 注册
搜索
52RD研发论坛»论坛 › 软件平台研发论坛 › Android › 基于Rexsee地图API实现的Android地图导航功能实战 ...
返回列表 发新帖回复
查看: 900|回复: 1

[讨论] 基于Rexsee地图API实现的Android地图导航功能实战

[复制链接]
lz210
发表于 2011-12-9 19:20:17 | 显示全部楼层 |阅读模式
研究了Rexsee的地图和GPS源码，感觉挺容易上手的，趁热做了个地图导航的功能，还在持续完善ing。。搞不定的可以去Rexsee的项目中心，我把我的源码分享出来了，可以直接看我的demo：http://www.rexsee.com/

先需要做一个程序框架。直接用HTML来做。下面看看效果图和HTML页面代码：

图片：http://www.rexsee.com/imagecache/bbs/11-10-14/1318575855.png
图片：http://www.rexsee.com/imagecache/bbs/11-10-14/1318575911.png

<html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>地图DEMO</title>
        <link href="css/index.css" rel="stylesheet" type="text/css" />
        </head>
                                                                                        
        <body>
       
          <div id="toolDiv"><table height="100%" width="100%">
          <tr>
          <td width="60%"><input id="search" class="inp" value="即时导航" onclick="inputs()" /><img src="images/da_ic_menu_search.png" width="15%" height="50%" onclick="routeImd()" /></td>
          <td width="13%"><img src="images/ic_menu_places.png" width="90%" height="50%" onclick="ctlPoi()" /></td>
          <td width="13%"><img src="images/ic_menu_layers.png" width="90%" height="50%" onclick="setLayer()" /></td>
          <td width="13%"><img src="images/ic_menu_mylocation.png" width="90%" height="50%" onclick="javascript:locations()" /></td>
          </tr>
          </table>
          </div>
          <div id="mapDiv"></div>
          <div id="menuDiv"><table cellpadding="0" cellspacing="0" width="100%" height="100%">
          <td width=20% style="-webkit-border-top-left-radius:20px;-webkit-border-bottom-left-radius:20px; background:-webkit-gradient(linear, 0 0, 0 100%,  from(#CCC), to(#fff))"><img src="images/ic_menu_reverse_directions.png" width="80%" height="60%" onclick="javascript:rexseeGps.openSettings()"/></td>
          <td width=20% style=" background:-webkit-gradient(linear, 0 0, 0 100%,  from(#CCC), to(#fff))"><img src="images/ic_menu_see_map.png" width="80%" height="60%" onclick="getRoute()" /></td>
          <td width=20% style=" background:-webkit-gradient(linear, 0 0, 0 100%,  from(#CCC), to(#fff))"><img src="images/ic_menu_edit.png" width="80%" height="60%" onclick="openSetWindow()"/></td>
          <td width=20% style=" background:-webkit-gradient(linear, 0 0, 0 100%,  from(#CCC), to(#fff))"><img src="images/ic_menu_terms.png" width="80%" height="60%" onclick="javascript:setCusPoi()" /></td>
          <td width=20% style="-webkit-border-top-right-radius:20px;-webkit-border-bottom-right-radius:20px; background:-webkit-gradient(linear, 0 0, 0 100%,  from(#CCC), to(#fff))"><img src="images/ic_menu_walking_steps.png" width="80%" height="60%" onclick="javascript:rexseeApplication.confirmExit();" /></td>
          </table>
          </div>
           <script src="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中倒数第二个本来是关于信息，好来为了测试自定义标记兴趣点给改了）
function ini(){
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);
}

function openSetWindow(){

     rexseeMenu.open("setMenu");
}  
var poi="";
if(rexseePreference.get("poi")!=null&&rexseePreference.get("poi")!=""){
poi= rexseePreference.get("poi");
}
function setPoi(){
           var pois=prompt('checkbox','title=兴趣点设置;options=加油站|停车场|餐厅|住宿|娱乐|景点|医院');
            pois=eval('('+pois+')');
            var poi="";
            for(var i=0;i<pois.length;i++){
                poi+=pois;
                if(i!=pois.length-1)
                    poi+="+";
            }
            rexseePreference.set("poi",poi);
            rexseeMapAbc.requestPoi('',poi);
}
function setRole(){
                   role=prompt('radio','title=行驶方式;defaultValue=BusDefault;options=BusDefault|BusLeaseWalk|BusMostComfortable|BusSaveMoney|DrivingDefault|DrivingLeaseWalk|DrivingMostComfortable|DrivingSaveMoney|WalkDefault');
    rexseePreference.set('role',role);
}

再看看功能代码

关于定位
var gps=true;
function locations(){
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;  
     
    }
   
    }
}
//测试用模式定位
function routeImd(){
   if(testMode)
   {
     routeim=true;
      locations();
   }else{
   if(rexseeGps.isReady()){
       routeim=true;
   locations();  
}else{
  rexseeDialog.toast('请打开GPS');
}
}
}

另一段，报告所在的位置：
var nl="";
var nla="";
function onGpsLocationChanged(time,accuracy,longitude,latitude,speed,bearing,altitude)
{
nl=longitude+"";
nla=latitude+"";
// alert(nl+" "+nla);
/* var temp=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;
      var targetName=document.getElementById("search").value;
      var tempTar=eval('('+rexseeMapAbc.getAddressFromLocationName(targetName,1)+')');
      var tlong=tempTar[0].Longitude+"";
      var tlat=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=您已到达凤凰置地广场附近。;');
        }
   }
}  

var notices=false;

初始地到目的地导航：
function getRoute()
        {
        rexseeMapAbc.hideRoute();
        var places=eval('('+prompt('prompt','title=导航输入框;message=请输入起始地和目的地：;options=起始地：|目的地：;defaultValue=北京市北京西站|北京市北京南站;inputType=text|text;')+')');
        var startPlace=places[0];
        var endPlace=places[1];
       
var tempsp=eval('('+rexseeMapAbc.getAddressFromLocationName(startPlace,1)+')');
var tempep=eval('('+rexseeMapAbc.getAddressFromLocationName(endPlace,1)+')');
        var splong=tempsp[0].Longitude+"";
        var splat=tempsp[0].Latitude+"";
        //alert(splong+" "+splat);
        var eplong=tempep[0].Longitude+"";
        var eplat=tempep[0].Latitude+"";
        rexseeMapAbc.requestRoute('routeRequest01',splong,splat,eplong,eplat,role);
        }
       
        function onRouteReady(id){
        //    alert(rexseeMapAbc.getRequesedRoute(id));
    var temps=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);
   var longs=temps[0].startLongitude;
   var lat=temps[0].startLatitude;
        //    alert(long+" "+lat);
   rexseeMapAbc.setCenter(longs,lat);
   rexseeMapAbc.showRoute(id,0)
        }

所在位置到目的地导航：
function inputs(){
document.getElementById("search").value=prompt('prompt','title=输入框;message=请输入要去的地方：;defaultValue=北京市北京西站;singleLine=false;');
}
因为是通用事件，写1次就好:function onRouteReady(id){
//    alert(rexseeMapAbc.getRequesedRoute(id));
     var temps=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);
    var longs=temps[0].startLongitude;
    var lat=temps[0].startLatitude;
//    alert(long+" "+lat);
    rexseeMapAbc.setCenter(longs,lat);
    rexseeMapAbc.showRoute(id,0)
}

开启/关闭路况:（暂无路况清除功能）
function setLayer(){
   if(!rexseeMapAbc.isTraffic()){
       rexseeDialog.toast('开启路况图层');
   rexseeMapAbc.setTraffic(true);
   }else{
       rexseeDialog.toast('关闭路况图层');
   rexseeMapAbc.setTraffic(false);
    }
}

兴趣点开关：
function setCusPoi(){
                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);
                }
        }
       
        var pageCount=0;
       
        function onPoiReady()
        {
         pageCount=rexseeMapAbc.getRequestedPoiPageCount();
               
        }
         var s=1;
        function showPoi(){
        if(s<pageCount){
        hidePoi();            
                 rexseeMapAbc.showPoi(s);
                     s++ ;
        if(s==pageCount-1){s=1;ctl=false;}
        }
        }
       
        function hidePoi(){
          rexseeMapAbc.hidePoi();
        }
        var ctl=true;
        function ctlPoi(){
             if(ctl){
                  showPoi();
                        rexseeDialog.toast('开启兴趣点显示,长按消除');        
             }else{
               hidePoi();
               ctl=true;
回复

使用道具 举报

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

使用道具 举报

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

本版积分规则

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

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

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

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