基于Rexsee地图API实现的Android地图导航功能实战
研究了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" />
<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>
<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 <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");
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:设置路径规划原则;');
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+')');
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;
if(gps){
if(rexseeGps.isReady()){
rexseeMapAbc.showCurrentLocation();
rexseeDialog.toast('开始定位......');
gps=false;
}else{
rexseeGps.openSettings();
}
}else{
rexseeMapAbc.hideCurrentLocation();
gps=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)
// 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;
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+"";
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);
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);
// 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('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++ ;
}
var ctl=true;
function ctlPoi(){
if(ctl){
showPoi();
rexseeDialog.toast('开启兴趣点显示,长按消除');
}else{
hidePoi();
ctl=true;
--------------------编程问答-------------------- Rexsee的项目中心在哪啊？没有找到，LZ给个具体地址呗 --------------------编程问答-------------------- 有最终版应用么？发个APK出来吧，Rexsee不是说可以直接编译成APK的嘛
补充：移动开发 , 移动开发其他问题
