導讀：百度導航基礎功能，d用到了bMap模塊，baiduNavigation模塊，UIListView模塊，樣式完全來自AUI，js用到了zepto.j
效果圖：
專案結構：
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="./css/aui.css" />
</head>
<body>
<div class="aui-bar aui-bar-nav aui-bar-warning" id="aui-header">百度導航</div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
apiready = function(){
var header = $api.byId('aui-header');
$api.fixStatusBar(header);
var headerPos = $api.offset(header);
api.openFrame({
name: 'main',
url: 'html/main.html',
bounces: true,
rect: {
x: 0,
y: headerPos.h,
w: 'auto',
h: api.winHeight-headerPos.h
},
pageParam:headerPos
});
};
</script>
</html>config.xml
<?xml version="1.0" encoding="UTF-8"?>
<widget id="A6916032819085" version="0.0.1">
<name>百度導航</name>
<description/>
<author email="231700764@qq.com" href="http://www.apicloud.com">孫叫獸</author>
<content src="index.html"/>
<preference name="pageBounce" value="false"/>
<preference name="appBackground" value="rgba(0,0,0,0.0)"/>
<preference name="windowBackground" value="rgba(0,0,0,0.0)"/>
<preference name="frameBackgroundColor" value="rgba(0,0,0,0.0)"/>
<preference name="hScrollBarEnabled" value="true"/>
<preference name="vScrollBarEnabled" value="true"/>
<preference name="autoLaunch" value="true"/>
<preference name="fullScreen" value="false"/>
<preference name="autoUpdate" value="true"/>
<preference name="smartUpdate" value="false"/>
<preference name="debug" value="true"/>
<preference name="statusBarAppearance" value="true"/>
<permission name="readPhoneState"/>
<permission name="camera"/>
<permission name="record"/>
<permission name="location"/>
<permission name="fileSystem"/>
<permission name="internet"/>
<permission name="bootCompleted"/>
<permission name="hardware"/>
<access origin="*"/>
<feature name="bMap">
<param name="android_api_key" value="aDUmM83PlAEpdRiNr7MAYyvSzsVg9CA4"/>
</feature>
<feature name="baiduNavigation"/>
<feature name="UICityList"/>
<feature name="UIListView"/>
</widget>
citylist.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css"/>
<style>
body{
}
</style>
</head>
<body>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
UICityList = api.require('UICityList');
fnOpen();
};
function fnOpen() {
UICityList.open({
rect : {
x : 0,
y : 0,
w : 'auto',
h : api.frameHeight
},
resource : 'widget://res/UICityList.json',
styles : {
searchBar : {
bgColor : '#7AC5CD',
cancColor : '#E3E3E3'
},
location : {
color : '#7AC5CD',
},
sectionTitle : {
bgColor : '#7AC5CD',
},
item : {
bgColor : '#7AC5CD',
},
indicator : {
bgColor : '#7AC5CD',
}
},
currentCity : '北京',
fixedOn:api.frameName
}, function(ret, err) {
if (ret.eventType == "selected") {
var cityname = ret.cityInfo.city;
api.execScript({
name:'destination_win',
frameName:'destination_frm',
script: 'selectCity("'+cityname+'");'
});
api.closeFrame();
}
});
}
</script>
</html>destination_frm.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/aui.css"/>
</head>
<body>
<p class="aui-padded-10 aui-text-center">點擊搜索后，選擇確切地址</p>
<div class="aui-card aui-noborder">
<div class="aui-form">
<div class="aui-input-row">
<span class="aui-input-addon">城市</span>
<input id="city" type="text" class="aui-input" onclick="opencitylist();" placeholder="請先選擇城市" readonly="true"/>
</div>
<div class="aui-input-row">
<span class="aui-input-addon">地址</span>
<input id="address" type="text" class="aui-input" placeholder="輸入地址后搜索"/>
</div>
<div class="aui-btn-row">
<div class="aui-btn aui-btn-success" onclick="search();">搜索</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript">
var isListOpen = false;//串列是否已開啟標識
apiready = function(){
map = api.require('bMap');
UIListView = api.require('UIListView');
//避免searchInCityF方法錯誤回傳，預先呼叫一次（不知道是不是bug，待官方確認）
map.searchInCity({
city: '北京',
keyword: '學校',
pageIndex: 0,
pageCapacity: 1
},function(ret){
});
};
function opencitylist(){
api.openFrame({
name: 'citylist',
url: './citylist.html',
rect: {
x:0,
y:api.pageParam.h,
w:api.winWidth,
h:api.winHeight-api.pageParam.h
}
});
}
/**
* 選擇城市方法，供citylist頁面呼叫
*/
function selectCity(name){
$("#city").val(name);
}
/**
* 搜索方法
*/
function search(){
api.showProgress();
searchInCity(0);
}
/**
* 在指定城市中尋找地址
* @param num
* 分頁查詢索引
* @param isappend
* 判斷是否往串列下面追加
*/
function searchInCity(num,isappend){
var city = $("#city").val();
var address = $("#address").val();
map.searchInCity({
city: city,
keyword: address,
pageIndex: num,
pageCapacity: 10
},function(ret,err){
api.hideProgress();
if(ret.status){
var data = [];
//獲得地址后，拼裝UIListView所需陣列
for(var i = 0;i<ret.results.length;i++){
var item = {
title:ret.results[i].name
}
data.push(item);
}
if(isappend){
//追加資訊
UIListView.appendData({
data:data
})
}else{
//生成串列
makeList(data);
}
}else{
switch(err.code){
case 3:
if(isappend){
api.toast({
msg:'沒有更多檢索結果'
});
}else{
api.toast({
msg:'未找到檢索結果'
});
}
if(isListOpen){
UIListView.appendData();
}
break;
case 1:
api.toast({
msg:'檢索詞有岐義'
});
break;
case 2:
api.toast({
msg:'檢索地址有岐義'
});
break;
}
}
});
}
function makeList(datas){
//串列若第一次打開則open，否則多載
if(isListOpen){
UIListView.reloadData({
data:datas
},function(ret){
})
}else{
UIListView.open({
rect: {
x: 10,
y: 211,
w: api.winWidth-20,
h: api.frameHeight-211
},
data: datas,
rightBtns: [{
bgColor: '#388e8e',
activeBgColor: '',
width: 70,
title: '按鈕',
titleSize: 12,
titleColor: '#fff',
icon: '',
iconWidth: 20
}],
styles: {
borderColor: '#c8c7cc',
item: {
bgColor: '#FFFFFF',
activeBgColor: '#F5F5F5',
height: 55.0,
imgWidth: 40,
imgHeight: 40,
imgCorner: 4,
placeholderImg: '',
titleSize: 12.0,
titleColor: '#000',
subTitleSize: 12.0,
subTitleColor: '#000',
remarkColor: '#000',
remarkSize: 16,
remarkIconWidth: 30
}
},
fixedOn: api.frameName
}, function( ret, err ){
if( ret ){
//回呼中，如果是串列打開狀態，則加入上拉加載方法
if(ret.eventType=="show"){
isListOpen=true;
UIListView.setRefreshFooter({
loadingImg: 'widget://res/UIListView_arrow.png',
bgColor: '#F5F5F5',
textColor: '#8E8E8E',
textUp: '上拉加載更多...',
textDown: '松開開始加載...',
showTime: true
},function( ret, err ){
if( ret ){
UIListView.getCount(function(ret){
searchInCity(ret.count,true);
})
}else{
alert( JSON.stringify( err ) );
}
});
}else{
//串列點擊方法，獲取地址傳給main頁面
UIListView.getDataByIndex({
index: ret.index
}, function(ret, err){
if( ret ){
api.execScript({
name:'root',
frameName:'main',
script: 'setAddress("'+ ret.data.title +'","'+ $("#city").val() +'");'
});
api.closeWin();
}else{
alert( JSON.stringify( err ) );
}
});
}
}else{
alert( JSON.stringify( err ) );
}
});
}
}
</script>
</html>main.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
</head>
<body>
<p class="aui-padded-10 aui-text-center">選擇目的地</p>
<div class="aui-card aui-noborder">
<div class="aui-form">
<div class="aui-input-row">
<span class="aui-input-addon">目的地</span>
<input id="end" type="text" class="aui-input" onclick="opencitylist();" placeholder="選擇目的地" readonly="true"/>
</div>
<div class="aui-btn-row">
<div class="aui-btn aui-btn-success" onclick="startNav();">開始導航</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript">
var city;
var start;
apiready = function(){
//引入bMap模塊
map = api.require('bMap');
//獲得當前位置
map.getLocation({
accuracy: '100m',
autoStop: true,
filter: 1
}, function(ret, err){
if(ret.status){
start ={
position:{
lon:ret.lon,
lat:ret.lat
},
title:'我的位置'
}
}else{
api.toast({
msg:err.code
});
}
});
};
function opencitylist(){
api.openWin({
name: 'destination_win',
url: './destination_win.html'
});
}
/**
* 設定目的地地址方法，供destination_frm頁面呼叫
*/
function setAddress(address,city){
$("#end").val(address);
city = city;
}
/**
* 開始導航
*/
function startNav(){
if($("#end").val()==""){
api.toast({
msg:'請先選擇目的地'
});
return;
}
api.showProgress({
style: 'default',
animationType: 'fade',
title: '努力加載中...',
text: '稍等片刻...',
modal: false
});
var address = $("#end").val();
//通過目的地資訊獲取目的地坐標
map.getCoordsFromName({
city: city,
address: address
},function(ret,err){
if(ret.status){
//在成功獲取目的地坐標后開始導航
var baiduNavigation = api.require('baiduNavigation');
baiduNavigation.start({
start: start,
end: {
position: { // 經緯度，與address配合可為空
lon: ret.lon, // 經度.
lat: ret.lat // 緯度.
},
title: address, // 描述資訊
address: address// 地址資訊，與position配合為空
}
}, function(ret, err){
api.hideProgress();
if(ret.status){
api.toast({
msg:'導航成功'
});
}else{
checkError(err);
}
});
}else{
checkError(err);
}
});
}
function checkError(err){
var msg = "未知錯誤";
if(1 == err.code){
msg = "獲取地理位置失敗";
}
if(2 == err.code){
msg = "定位服務未開啟";
}
if(3 == err.code){
msg = "線路取消";
}
if(4 == err.code){
msg = "退出導航";
}
if(5 == err.code){
msg = "退出導航宣告頁面";
}
api.toast({
msg: msg
});
}
</script>
</html>destination_win.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="../css/aui-win.css" />
</head>
<body>
<header class="aui-bar aui-bar-nav aui-bar-warning" id="aui-header">
<a class="aui-btn aui-btn-warning aui-pull-left" tapmode onclick="closeWin()">
<span class="aui-iconfont aui-icon-left"></span>
</a>
<div class="aui-title">選擇目的地</div>
<a class="aui-iconfont aui-icon-menu aui-pull-right"></a>
</header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
function closeWin(){
api.closeWin();
}
apiready = function(){
api.parseTapmode();
var header = $api.byId('aui-header');
$api.fixStatusBar(header);
var headerPos = $api.offset(header);
var body_h = $api.offset($api.dom('body')).h;
api.openFrame({
name: 'destination_frm',
url: './destination_frm.html',
bounces: false,
rect: {
x: 0,
y: headerPos.h,
w: headerPos.w,
h: 'auto'
},
pageParam:headerPos
})
};
</script>
</html>完整代碼樣式及js請下載：百度導航功能
孫叫獸
CSDN認證博客專家
HTTPS
Node.js
JavaScript
CSDN認證博客專家
HTTPS
Node.js
JavaScript
多年的開發經驗，開發過APP,小程式，網站及系統，以前從事java相關系統研發，目前從事保險，證券，金融相關的前端全堆疊開發作業，微信公眾號：電商程式員.QQ交流群：426360778
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/245232.html
標籤：其他