敬告:此 demo 演示为开放测试页面,仅用于开发者快速测试体验应用功能,请严格遵守开发者协议,九游会国际-九游会真人第一品牌。
♦ js-sdk 引用方式:
♦ 普通网页 script 方式加载:下载最新版 ,请在页面上调用 jsbridge 接口之前引用 jsbridge-mini.js 库;
♦ js module 方式引用:npm install ym-jsbridge
事件监听
• 如需处理接口调用事件,请设置此监听器;
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: "" //事件参数,字符串类型 } **/
//移除监听器,不会再收到回调通知 //在需要时可重新调用 setlistener jsbridge.amapnavi.removelistener();
导航
通行方式:
//位置点 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" } });
//从我的位置驾车导航到天安门广场 jsbridge.amapnavi.showroute({ end: { name: "天安门广场", lat : 39.903179, lng : 116.397755 } });
//从我的位置骑行到成都天府广场 jsbridge.amapnavi.showroute({ //骑行 navitype: "ride", end: { name: "成都天府广场", lat : 30.657401, lng : 104.065861 }, theme: "white" });
//从我的位置步行到成都东站 jsbridge.amapnavi.showroute({ //步行 navitype: "walk", end: { name: "成都东站", lat : 30.628931, lng : 104.141094 }, theme: "black" });
jsbridge.amapnavi.showroute({ //摩托车 navitype: "motorcycle", end: { name: "成都东站", lat : 30.628931, lng : 104.141094 }, theme: "black" });
//从我的位置驾车出发(自己输入目的地) jsbridge.amapnavi.showroute();
监听回调数据: