基于appcan的百度地图开发

在使用appcan进行移动开发时候，导航的两种实现方式：一、基于地图的API；二、基于导航的API。本文就appcan用地图实现附近、卫星地图、路径规划和交通图四个方面的实现做讲解：

代码：

<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/fonts/font-awesome.min.css">
<link rel="stylesheet" href="css/ui-box.css">
<link rel="stylesheet" href="css/ui-base.css">
<link rel="stylesheet" href="css/ui-color.css">
<link rel="stylesheet" href="css/appcan.icon.css">
<link rel="stylesheet" href="css/appcan.control.css">
<link rel="stylesheet" href="css/GPRS.css">
</head>
<body class="um-vp" ontouchstart>
<div id="page_0" class="up ub ub-ver bc-bg" tabindex="0">


<div id="header" class="uh bc-text-head ub bc-head">
<div id="sechplan" class="yb-btn" id="back">
推荐 <br />
导航
</div>
<div class="uinn uinn ub-f1">
<div class=" sc-bg-active uinput ub ub-f1 bc-border uba uc-a1">
<input value="" id="splace" type="text" class="" >
</div>

<div class="sc-bg-active uinput ub ub-f1 bc-border uba uc-a1" style="margin-top:0.2em" >
<input value="" id="eplace" type="text" class="" >
</div>
</div>
<div class="yb-btn" id="search">
<div class="fa fa-search fa-yb"></div>
</div>
</div>


<div id="content" class="ub-f1 tx-l">

</div>

<div id="footer" class="uh bc-text-head ub bc-head uinn">
<div class="yb-btn ub-f1" id="btn1">
<div class="fa fa-globe fa-2x"></div>
</div>
<div class="yb-btn ub-f1" id="btn2">
<div class="fa fa-map-marker fa-2x"></div>
</div>
<div class="yb-btn ub-f1" id="btn3">
<div class="fa fa-location-arrow fa-2x"></div>
</div>
</div>
</div>
<script src="js/appcan.js"></script>
<script src="js/appcan.control.js"></script>
</body>
<script>

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;
});
}
</script>

</html>

js代码单独罗列：

注意事项：

在测试时候，需要云端打包测试，为此在创建地图时候，需要先做以下几个准备工作：

1.注册百度开发者，创建地图应用。

2.然后在appcan中配置包名和获取SHA key值

3.在appcan工程中的config.xml的设置创建的百度API key 插件ID。

4.git进行云端打包测试。

基于appcan的百度地图开发

代码：

js代码单独罗列：

猜你喜欢