高德地图 JS API 学习摘要5

输入提示

• 获取输入提示数据

使用 Autocomplete 获取输入提示信息。

• 输入提示 联想输入

使用Autocomplete进行联想输入。

• 获取搜索数据

使用 AMap.PlaceSearch 获取地址搜索信息。

• 关键字搜索

• 周边服务

PlaceSearch.searchNearBy，在中心点附近一定范围进行关键字搜索

• 详情查询

PlaceSearch.getDetails，根据POIID获取某个POI的详细信息。POI指Point of Interest兴趣点。

//详情查询
placeSearch.getDetails("B000A83U0P", function(status, result) {
    if (status === 'complete' && result.info === 'OK') {
        placeSearch_CallBack(result); // 回调
    }
});
function placeSerach_CallBack(data){
    console.log(data)
}

• 输入提示后查询

组合使用Autocomplete和PlaceSearch进行POI搜索。

• 根据搜索结果添加Marker

var placeSearch = new AMap.PlaceSearch({
    // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
    city: '021'
    })

placeSearch.search('东方明珠', function (status, result) {
    // 查询成功时，result即对应匹配的POI信息
    console.log(result)
    var pois = result.poiList.pois;
    for(var i = 0; i < pois.length; i++){
        var poi = pois[i];
        var marker = [];
        marker[i] = new AMap.Marker({
            position: poi.location,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: poi.name // 鼠标悬停展示
        });
        // 将创建的点标记添加到已有的地图实例：
        map.add(marker[i]);
    }
    map.setFitView();
})

驾车路线规划

• 驾车规划路线

使用 AMap.Driving进行驾车路线规划。

• 自定义绘制规划驾车路线

// 根据起终点经纬度规划驾车导航路线
driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719), function(status, result) {
    // result即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
    if (status === 'complete') {
        if (result.routes && result.routes.length) {
            // 绘制第一条路线，也可以按需求绘制其它几条路线
            drawRoute(result.routes[0])
            log.success('绘制驾车路线完成')
        }
    } else {
        log.error('获取驾车数据失败：' + result)
    }
});

function drawRoute (route) {
    var path = parseRouteToPath(route)

    var startMarker = new AMap.Marker({
        position: path[0],
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/start.png',
        map: map
    })

    var endMarker = new AMap.Marker({
        position: path[path.length - 1],
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/end.png',
        map: map
    })

    var routeLine = new AMap.Polyline({
        path: path,
        isOutline: true,
        outlineColor: '#ffeeee',
        borderWeight: 2,
        strokeWeight: 5,
        strokeColor: '#0091ff',
        lineJoin: 'round'
    })
    routeLine.setMap(map)
    // 调整视野达到最佳显示区域
    map.setFitView([ startMarker, endMarker, routeLine ])
}

// 解析DrivingRoute对象，构造成AMap.Polyline的path参数需要的格式
// DrivingResult对象结构参考文档 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DriveRoute
function parseRouteToPath(route) {
    var path = []

    for (var i = 0, l = route.steps.length; i < l; i++) {
        var step = route.steps[i]
        for (var j = 0, n = step.path.length; j < n; j++) {
            path.push(step.path[j])
        }
    }
    return path
}

• 使用AMap.DrivingRender直接对路径规划的结果进行驾车路线可视化展示

当AMap.Driving构造类中使用了panel和map属性后，在调用driving.search完成后就会自动绘制路线信息和路线，回调用来把握路线绘制完成后做何操作，而Lib.AMap.DrivingRender()).autoRender()则是在回调中进行绘制渲染。

• 可拖拽驾车路线规划

var map, route, marker;
//基本地图加载
map = new AMap.Map("container", {
    resizeEnable: true
});
//绘制初始路径
var path = [];
path.push([116.303843, 39.983412]);// 起点
path.push([116.321354, 39.896436]); // 途经点
path.push([116.407012, 39.992093]); // 终点 如果只有两个就是起终点
map.plugin("AMap.DragRoute", function() {
    route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类
    route.search(); //查询导航路径并开启拖拽导航
    // 每次拖动的如果不是起点 终点 途经点中的一个  则会新增加一个途经点
});

• 途经点

driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719),{
    waypoints:[new AMap.LngLat(116.379028, 39.885042)] 
    // 第三个参数为途经点对象 对象中有waypoints属性（数组）
}, function(status, result) {
    // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
    if (status === 'complete') {
        log.success('绘制驾车路线完成')
    } else {
        log.error('获取驾车数据失败：' + result)
    }
});

货车路线规划

• 位置经纬度 + 货车路线规划

使用 AMap.TruckDriving 与经纬度信息进行货车路线规划。

 

var map = new AMap.Map("container", {});
var truckOptions = {
        map: map,
        city:'beijing',
        policy: 0, // 规划策略
        size: 1, // 车型大小
        width: 2.5, // 宽度
        height: 2, // 高度      
        load: 1, // 载重
        weight: 12, // 自重
        axlesNum: 2, // 轴数
        province: '京', // 车辆牌照省份
        isOutline: true,
        outlineColor: '#ffeeee',
        panel: 'panel'
};
var driving = new AMap.TruckDriving(truckOptions);

var path = [];  // 添加的是对象  经纬度查询
path.push({lnglat:[116.303843, 39.983412]});//起点
path.push({lnglat:[116.321354, 39.896436]});//途径
path.push({lnglat:[116.407012, 39.992093]});//终点


var path1 = [ // 添加的是对象 关键字查询
    {keyword:'北京站',city:'010'},//起点
    {keyword:'北京西站',city:'010'},//途径
    {keyword:'北京大学',city:'010'}//终点
];

driving.search(path, function(status, result) {
    // result即是对应的货车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
    if (status === 'complete') {
        log.success('绘制货车路线完成')
        // 也可以在获取规划数据后自定义绘制
        // if (result.routes && result.routes.length) {
        //     drawRoute(result.routes[0]) 函数 用来自定义绘制路线
        // }
    } else {
        log.error('获取货车规划数据失败：' + result)
    }
    });

步行路线规划

• 位置经纬度 + 步行路线规划

使用AMap.Walking进行步行路线规划。

//步行导航
var walking = new AMap.Walking({
    map: map,
    panel: "panel"
}); 
//根据起终点坐标规划步行路线
walking.search([116.399028, 39.845042], [116.436281, 39.880719], function(status, result) {
    // result即是对应的步行路线数据信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_WalkingResult
    if (status === 'complete') {
        log.success('绘制步行路线完成')
    } else {
        log.error('步行路线数据查询失败' + result)
    } 
});

// 根据地点关键字规划步行路线
walking.search([
    {keyword: '北京市地震局(公交站)',city:'北京'},
    {keyword: '亦庄文化园(地铁站)',city:'北京'}
], function(status, result) {} });

// 使用 AMap.WalkingRender 对『步行路线规划结果数据』进行可视化展示
// var walking = new AMap.Walking(); //构造路线导航类
walking.search(new AMap.LngLat(116.464996,39.971433), new AMap.LngLat(116.396034,39.923271), function(status, result){
    if(status === 'complete'){
        (new Lib.AMap.WalkingRender()).autoRender({
            data: result,
            map: map,
            panel: "panel"
        });
        log.success('绘制步行路线完成')
    }
}); 

骑行路线规划

使用AMap.Riding进行骑行路线规划

 

//骑行导航
var riding = new AMap.Riding({
    map: map,
    panel: "panel"
}); 

// 配置项
// var ridingOption = {
//     map: map,
//     panel: "panel",
//     policy: 1,
//     hideMarkers: false,
//     isOutline: true,
//     outlineColor: '#ffeeee',
//     autoFitView: true
// }

//根据起终点坐标规划骑行路线
riding.search([116.397933,39.844818],[116.440655,39.878694], function(status, result) {});

// 根据关键点规划骑行路线
riding.search([
    {keyword: '临泓路６号院',city:'北京'},
    {keyword: '龙潭公园',city:'北京'}
], function(status,result) {})

公交路线规划

使用AMap.Transfer进行公交路线规划。

 var map = new AMap.Map("container", {
    resizeEnable: true,
    center: [116.397428, 39.90923],
    zoom: 13 //地图显示的缩放级别
});
var transOptions = {
    map: map,
    city: '北京市',
    panel: 'panel',                            
    //cityd:'乌鲁木齐',//跨城进行公交路径规划时，目的地所在城市
    policy: AMap.TransferPolicy.LEAST_TIME,
    nightflag: true, // 是否计算夜班车
};
//构造公交换乘类
var transfer = new AMap.Transfer(transOptions);
//根据起、终点坐标查询公交换乘路线
transfer.search(new AMap.LngLat(116.291035,39.907899), new AMap.LngLat(116.427281, 39.903719), function(status, result) {
    // result即是对应的公交路线数据信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_TransferResult
    if (status === 'complete') {
        log.success('绘制公交路线完成')

        // 也可以搜索到了即刻展示 之前配置项里面就不需要再配map和panel
        // (new Lib.AMap.TransferRender()).autoRender({
        //     data:result,
        //     map:map,
        //     panel:"panel"
        // });
    } else {
        log.error('公交路线数据查询失败' + result)
    }
});

//根据起、终点名称查询公交换乘路线
transfer.search([
    //元素city缺省时取transOptions的city属性
    {keyword: '地震局',city:'北京'},
    {keyword: '望京西园4区',city:'北京'}
], function(status, result) {});