高德导航 - WebApp快捷打包

敬告：此 DEMO 演示为开放测试页面，仅用于开发者快速测试体验应用功能，请严格遵守开发者协议，了解更多。

事件监听

setListener 设置监听器

• 如需处理接口调用事件，请设置此监听器；

jsBridge.amapNavi.setListener(function(event, res) {
    //res.action 的具体含义请参考官方文档
    switch (res.action) {
        //导航初始化失败
        case "onInitNaviFailure": {
            break;
        }
        //导航播报信息，res.message 为播报文本
        case "onGetNavigationText": {
            break;
        }
        //位置有更新，res.message 包含经纬度和速度的 json 字符串
        case "onLocationChange": {
            break;
        }
        //到达目的地
        case "onArriveDestination": {
            break;
        }
        //启动导航
        case "onStartNavi": {
            break;
        }
        //算路成功
        case "onCalculateRouteSuccess": {
            break;
        }
        //停止播报
        case "onStopSpeaking": {
            break;
        }
        //重新规划线路
        case "onReCalculateRoute": {
            break;
        }
        //退出组件或退出组件导航
        case "onExitPage": {
            break;
        }
        //切换算路偏好
        case "onStrategyChanged": {
            break;
        }
        //驾车路径导航到达某个途经点
        case "onArrivedWayPoint": {
            break;
        }
        //组件地图白天黑夜模式切换
        case "onMapTypeChanged": {
            break;
        }
        //导航视角变化
        case "onNaviDirectionChanged": {
            break;
        }
        //昼夜模式设置变化
        case "onDayAndNightModeChanged": {
            break;
        }
        //播报模式变化
        case "onBroadcastModeChanged": {
            break;
        }
        //比例尺智能缩放设置变化
        case "onScaleAutoChanged": {
            break;
        }
    }
    //此函数仅用于显示回调参数在本 DEMO 页面上
    showResult(res);
});

//请拉到页面底部查看回调数据信息
$('html,body').animate({ scrollTop: $('#view').offset().top }, 500);

/**
回调参数说明：
event  //事件代码，固定值 amapNavi
data:  //事件数据，JSON 对象
{
  action : "onArriveDestination",   //事件名称，字符串类型
  message: ""                       //事件参数，字符串类型
}
**/

removeListener 移除监听器

//移除监听器，不会再收到回调通知
//在需要时可重新调用 setListener
jsBridge.amapNavi.removeListener();

导航

showRoute 显示导航路线

通行方式：

//位置点
var p1 = {
    //名称
    name: "首开广场",
    //纬度
    lat: 39.993266,
    //经度
    lng: 116.473193
};
var p2 = {
    name: "故宫博物院",
    lat: 39.917337,
    lng: 116.397056
};
var p3 = {
    name: "北京站",
    lat: 39.904556,
    lng: 116.427231
};
var p4 = {
    name: "新三余公园(南5环)",
    lat: 39.773801,
    lng: 116.368984
};
var p5 = {
    name: "立水桥(北5环)",
    lat: 40.041986,
    lng: 116.414496
};
//示例：驾车从 立水桥(北5环) 途径 首开广场、故宫博物院、北京站 到 新三余公园(南5环)
jsBridge.amapNavi.showRoute({
    //可选，字符串类型，导航类型，可选值: drive 驾车, ride 骑行, walk 步行, motorcycle 摩托车，默认 drive
    naviType: $("#naviType").val(),
    //可选，起点，默认我的位置
    start: p5,
    //可选，途径点，最多可设置3个途径点，默认无
    wayPoints: [p1, p2, p3],
    //可选，止点，默认无
    end: p4,
    //可选，数字类型，播报模式，可选值 1 简洁播报, 2 详细播报 3 静音模式，默认 2
    broadcastMode: 2,
    //可选，是否显示交通路况，默认 false
    trafficEnabled: false,
    //可选，字符串类型，主题，可选 blue 蓝色, white 白色, black 黑色，默认 blue
    theme: "blue",
    //可选，设置车辆信息，进行尾号限行与货车导航，默认无
    carInfo: {
        //是否躲避车辆限行
        restriction: true,
        //车牌号码
        carNumber: "京A12345",
        //0 燃油客车，1 燃油货车，2 纯电动客车，3 纯电动货车
        carType: "0",
        //carType 为 1 时设置货车的轴数，取值 0 - 255
        vehicleAxis: "2",
        //carType 为 1 时设置货车的最大长度，单位：米，取值 0 - 25 如: 1.8，1.5等
        vehicleLength: "1.5",
        //carType 为 1 时设置货车的最大宽度，单位：米，取值 0 - 25.5 如:1.8，1.5等
        vehicleWidth: "2.6",
        //carType 为 1 时设置货车的最大高度，单位：米，取值 0 - 25.5 如:1.8，1.5等
        vehicleHeight: "1.5",
        //carType 为 1 时设置货车的核定载重，单位：吨，取值 0 - 6553.5
        vehicleWeight: "6",
        //carType 为 1 时设置货车的总重，即车重 + 核定载重，单位：吨，取值 0 - 6553.5
        vehicleLoad: "8",
        //carType 为 1 时设置货车重量是否参与算路
        vehicleLoadSwitch: true,
        //carType 为 1 时设置货车的大小
        vehicleSize: "2"

    }
});

showRoute 从我的位置驾车导航到天安门广场

//从我的位置驾车导航到天安门广场
jsBridge.amapNavi.showRoute({
  end: {
    name: "天安门广场",
    lat : 39.903179,
    lng : 116.397755
  }
});

showRoute 从我的位置骑行到成都天府广场

//从我的位置骑行到成都天府广场
jsBridge.amapNavi.showRoute({
  //骑行
  naviType: "ride",
  end: {
    name: "成都天府广场",
    lat : 30.657401,
    lng : 104.065861
  },
  theme: "white"
});

showRoute 从我的位置步行到成都东站

//从我的位置步行到成都东站
jsBridge.amapNavi.showRoute({
  //步行
  naviType: "walk",
  end: {
    name: "成都东站",
    lat : 30.628931,
    lng : 104.141094
  },
  theme: "black"
});

showRoute 从我的位置摩托车到成都东站

jsBridge.amapNavi.showRoute({
  //摩托车
  naviType: "motorcycle",
  end: {
    name: "成都东站",
    lat : 30.628931,
    lng : 104.141094
  },
  theme: "black"
});

showRoute 从我的位置驾车出发(自己输入目的地)

//从我的位置驾车出发(自己输入目的地)
jsBridge.amapNavi.showRoute();

监听回调数据：