基于appcan的百度地图开发
在使用appcan进行移动开发时候，导航的两种实现方式：一、基于地图的API；二、基于导航的API。本文就appcan用地图实现附近、卫星地图、路径规划和交通图四个方面的实现做讲解：
代码：
推荐
导航
js代码单独罗列：
var titHeight = $('#header').offset().height;var serchlong;
var serchlati;
var longitude;//当前
var latitude;
var setText;
var cityname;
appcan.ready(function() {
appcan.initBounce();
var top=Number(appcan.locStorage.getVal("titheight"));
var width=screen.availWidth;
var height=screen.availHeight-top-50;
uexBaiduMap.open(0,titHeight,
$('#content').offset().width,
$('#content').offset().height,
"30.78","103.95");
uexBaiduMap.setCompassEnable(1);
uexBaiduMap.setScrollEnable(1)
uexBaiduMap.setMapType(1);//地图的类型(1-标准地图,2-卫星地图)
setZoomLevel(15);//地图缩放级别 范围:3~19,数值越大越精确
// 地理编码的回调方法
uexBaiduMap.cbGeoCodeResult=function(data) {
searchAddressObj=eval('('+data+')');
//alert("查询地址编码的纬度："+searchAddressObj.longitude);
//alert("查询地址编码的经度："+searchAddressObj.latitude);
serchlong=searchAddressObj.longitude;
serchlati=searchAddressObj.latitude;
setCenter(searchAddressObj.longitude,searchAddressObj.latitude);
addMark(searchAddressObj.longitude,searchAddressObj.latitude);
}
//获取当前位置的回调方法
uexBaiduMap.cbCurrentLocation=function(data){
userAddressObj=eval('('+data+')');
//alert("获取当前位置的回调数据："+data);
//alert("转换后的json="+userAddressObj);
longitude =userAddressObj.longitude;
latitude=userAddressObj.latitude;
//alert("当前位置纬度="+longitude);
//alert("当前位置经度="+latitude);
setCenter(longitude,latitude);
uexBaiduMap.setUserTrackingMode(0);
//通过初试当前位置经纬度，翻转成具体位置信息
//document.getElementById("splace").value=str;
}
getCurrentLocation();//获取当前位置，设置输入框1
//规划路径成功后的回调函数
uexBaiduMap.onSearchRoutePlan = function(status){
if(status==0)
{
//alert("规划状态"+status);
// setCenter(longitude,latitude);
uexBaiduMap.startLocation();
//跟踪模式(0--通定位模式,1--跟随模式,2--罗盘模式
uexBaiduMap.setUserTrackingMode(2);
//显示或隐藏用户位置(0-隐藏,1-显示)
uexBaiduMap.setMyLocationEnable(1);
//uexBaiduMap.preRouteNode();
uexBaiduMap.nextRouteNode();
//开启关闭平移
uexBaiduMap.setScrollEnable(1);
uexBaiduMap.rotate(180);
}
else
{
appcan.window.toast("规划失败");
}
}
setZoomEnable();
});
//设置百度地图中心点
function setCenter (longitude,latitude) {
//alert("设置中心"+longitude);
//alert("设置中心"+latitude);
uexBaiduMap.setCenter(longitude,latitude);
}
//关闭百度地图功能
function closeMap () {
uexBaiduMap.close();
}
//定义百度地图缩放级别
function setZoomLevel(num) {
uexBaiduMap.setZoomLevel(num);
}
//定义百度地图标注
var markId = 10001;
function addMark(log, lat) {
markId++;
// alert(markId);
var params = [{
id: markId,
longitude:log,
latitude:lat,
}];
var data = JSON.stringify(params);
// alert(data);
uexBaiduMap.addMarkersOverlay(data);
}
//通过地址获得经纬度信息
function getGeocode(city,address) {
var jsonstr= {
"city":city,
"address":address
};
var data = JSON.stringify(jsonstr);
//alert("获得地址经纬度信息"+data);
uexBaiduMap.geocode(data);
}
//设置地图类型 1-标准地图，2-卫星地图
var change=0;
function setMapStyle() {
change++;
if(change%2!=0){
var typeOne=2;
uexBaiduMap.setMapType(typeOne);
}else{
var typeTwo=1;
uexBaiduMap.setMapType(typeTwo);
}
}
//获取当前位置
function getCurrentLocation () {
uexBaiduMap.getCurrentLocation();
}
//开启或关闭实时路况
var flag=0;
function setTrafficEnable () {
flag++;
if(flag%2!=0){
var params=1;
uexBaiduMap.setTrafficEnabled(params);
}else{
var params=0;
uexBaiduMap.setTrafficEnabled(params);
}
}
//开启或关闭手势缩放
function setZoomEnable () {
uexBaiduMap.setZoomEnable(1);
}
var city;//定义城市
appcan.button(".yb-btn", "ani-act", function() {
switch(this.id){
case "btn1":
setMapStyle();
break;
case "btn2":
getCurrentLocation();
break;
case "btn3":
setTrafficEnable();
break;
case "back":
appcan.window.close(-1);
closeMap();
break;
case "search":
{
appcan.window.toast("准备搜索路径!");
var input=document.getElementById("splace").value;
if(input==null||input==""){
}else{
getGeocode(city,input);
}
}
break;
case "sechplan":
serchplan();
break;
}
})
//路径规划
function serchplan () {
var sname=document.getElementById("splace").value;
var ename=document.getElementById("eplace").value;
//alert("sname="+sname+" ename= "+ename);
getGeocode(city,ename)
var data = {
id: "rp345",
type:0,
start: {
'city':cityname,
'name': sname,
'longitude':longitude,
'latitude':latitude
},
end:{
'city':cityname,
'name': ename,
'longitude':serchlong,
'latitude':serchlati
}
};
var jsonStr=JSON.stringify(data);//转换成json数据
//alert("规划导航数据"+jsonStr);
uexBaiduMap.searchRoutePlan(jsonStr);//开始规划路径
// alert("规划中");
//alert("经纬度反转测试------------");
revese();
}
//路径翻转测试
function revese () {
var data={
'longitude': longitude,
'latitude': latitude
};
uexBaiduMap.reverseGeocode(data, function(error,data) {
//alert("地址反转："+data.address);
cityname=data.city;
//alert("地址反城市："+data.city);
return data.address;
});
}
注意事项：
在测试时候，需要云端打包测试，为此在创建地图时候，需要先做以下几个准备工作：
1.注册百度开发者，创建地图应用。
2.然后在appcan中配置包名和获取SHA key值
3.在appcan工程中的config.xml的设置创建的百度API key 插件ID。
4.git进行云端打包测试。