高德导航 -九游会国际

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

敬告:此 demo 演示为开放测试页面,仅用于开发者快速测试体验应用功能,请严格遵守开发者协议,九游会国际-九游会真人第一品牌

js-sdk 引用方式:

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

♦ js module 方式引用:npm install ym-jsbridge

事件监听

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

监听回调数据:

网站地图