WebApp快捷打包
高德导航
转到模块插件

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

JS-SDK 引用方式:

♦ 普通网页 script 方式加载:下载最新版 jsBridge-v20240326.zip,请在页面上调用 jsBridge 接口之前引用 jsbridge-mini.js 库;

♦ js module 方式引用:npm install ym-jsbridge 具体请参考 npm package

事件监听

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();

监听回调数据: