输入提示

• 获取输入提示数据

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

<script src="https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值&plugin=AMap.Autocomplete"></script>
<script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/demo-center/js/prety-json.js'></script>
<script>
    // 获取输入提示信息
    function autoInput(){
        var keywords = document.getElementById("input").value;
        AMap.plugin('AMap.Autocomplete', function(){
            // 实例化Autocomplete
            var autoOptions = {
                city: '全国'
            } 
            var autoComplete = new AMap.Autocomplete(autoOptions);// 以全国为区域范围搜索
            autoComplete.search(keywords, function(status, result) {
                // 搜索成功时，result即是对应的匹配数据
                var node = new PrettyJSON.view.Node({
                    el: document.querySelector("#input-info"),
                    data: result
                }); // 该类可将数据自动渲染到dom树上
            })
        })
    }
    autoInput();
    document.getElementById("input").oninput = autoInput;
</script>

• 输入提示 联想输入

使用Autocomplete进行联想输入。

<input id='tipinput' type="text">
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值&plugin=AMap.Autocomplete"></script>
<script type="text/javascript">
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    //输入提示
    var auto = new AMap.Autocomplete({
        input: "tipinput"
    });
</script>

• 获取搜索数据

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

<script src="https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值&plugin=AMap.PlaceSearch"></script>
<script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/demo-center/js/prety-json.js'></script>
<script>
    // 获取搜索信息
    function autoInput(){
        var keywords = '软件基地';
        AMap.plugin('AMap.PlaceSearch', function(){
            var autoOptions = {
                city: '全国'
            }
            var placeSearch = new AMap.PlaceSearch(autoOptions);
            placeSearch.search(keywords, function(status, result) {
                // 搜索成功时，result即是对应的匹配数据
                var node = new PrettyJSON.view.Node({
                    el: document.querySelector("#input-info"),
                    data: result
                });
            })
        })
    }
</script> 

• 关键字搜索

<div id="panel"></div>
<script>
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    AMap.service(["AMap.PlaceSearch"], function() {
        //构造地点查询类
        var placeSearch = new AMap.PlaceSearch({ 
            pageSize: 5, // 单页显示结果条数
            pageIndex: 1, // 页码
            city: "010", // 兴趣点城市
            citylimit: true,  //是否强制限制在设置的城市内搜索
            map: map, // 展现结果的地图实例
            panel: "panel", // 结果列表将在此容器中进行展示。
            autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });
        //关键字查询
        placeSearch.search('北京大学');

        // 多关键字查询
        // placeSearch.search('方恒国际中心｜大恒科技大厦');
    });
</script> 

• 周边服务

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

<div id="container"></div>
<div id="panel"></div>
<script type="text/javascript">
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    AMap.service(["AMap.PlaceSearch"], function() {
        //构造地点查询类
        var placeSearch = new AMap.PlaceSearch({ 
            type: '餐饮服务', // 兴趣点类别
            pageSize: 5, // 单页显示结果条数
            pageIndex: 1, // 页码
            city: "010", // 兴趣点城市
            citylimit: true,  //是否强制限制在设置的城市内搜索
            map: map, // 展现结果的地图实例
            panel: "panel", // 结果列表将在此容器中进行展示。
            autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });
        
        var cpoint = [116.405467, 39.907761]; //中心点坐标
        placeSearch.searchNearBy('', cpoint, 200, function(status, result) {
        
        });
    });

// 兴趣点类别，多个类别用“|”分割，如“餐饮|酒店|电影院”
// POI搜索类型共分为以下20种：

// 汽车服务|汽车销售|汽车维修|摩托车服务|餐饮服务|购物服务|生活服务|体育休闲服务|

// 医疗保健服务|住宿服务|风景名胜|商务住宅|政府机构及社会团体|科教文化服务|

// 交通设施服务|金融保险服务|公司企业|道路附属设施|地名地址信息|公共设施

// 默认值：餐饮服务、商务住宅、生活服务 
</script>

• 详情查询

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搜索。

<input id="tipinput"/>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<script>
    //输入提示
    var autoOptions = { 
        input: "tipinput"
    };
    var auto = new AMap.Autocomplete(autoOptions);
    var placeSearch = new AMap.PlaceSearch({
        map: map
    });  //构造地点查询类
    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
    function select(e) {
        placeSearch.setCity(e.poi.adcode);
        placeSearch.search(e.poi.name);  //关键字查询查询
    }
</script>

• 根据搜索结果添加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进行驾车路线规划。

<div id="container"></div>
<div id="panel"></div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值&plugin=AMap.Driving"></script>
<script>
    //基本地图加载
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    //构造路线导航类
    var driving = new AMap.Driving({
        policy: AMap.DrivingPolicy.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
        //  驾车策略 LEAST_TIME 最快捷 LEAST_FEE 最经济 LEAST_DISTANCE 最短距离 REAL_TRAFFIC 考虑实时路况
        ferry: 1, // 是否可以使用轮渡
        province: '鄂', // 车牌省份的汉字缩写
        map: map,
        panel: "panel" // panel 属性会将具体导航信息渲染到id为"panel"的DIV上 可不设置。
    }); 
    // 根据起终点经纬度规划驾车导航路线 三个参数 起点 终点 回调函数
    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') {
            log.success('绘制驾车路线完成')
        } else {
            log.error('获取驾车数据失败：' + result)
        }
    });

    // 根据起终点名称规划驾车导航路线 两个参数 起终点的数组 回调
    driving.search([
        {keyword: '北京市地震局(公交站)',city:'北京'},
        {keyword: '亦庄文化园(地铁站)',city:'北京'}
    ], function(status, result) {
        if (status === 'complete'&& result.info === 'OK') {
            log.success('绘制驾车路线完成')
        } else {
            log.error('获取驾车数据失败：' + result)
        }
    });
</script>

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

// 根据起终点经纬度规划驾车导航路线
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()则是在回调中进行绘制渲染。

<script type="text/javascript" src="https://cache.amap.com/lbs/static/DrivingRender1230.js"></script> 
<div id="container"></div>
<div id="panel"></div>
<script type="text/javascript">
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    //驾车导航，您如果想修改结果展现效果，请参考页面：https://lbs.amap.com/fn/css-style/
    var drivingOption = {
        policy:AMap.DrivingPolicy.LEAST_TIME
    };
    var driving = new AMap.Driving(drivingOption); //构造驾车导航类
    //根据起终点坐标规划驾车路线 
    driving.search([{keyword:'北京市地震局(公交站)'},{keyword:'亦庄文化园(地铁站)'}], function(status, result){
        if(status === 'complete' && result.info === 'OK'){
            (new Lib.AMap.DrivingRender()).autoRender({
                data: result,
                map: map,
                panel: "panel"
            });
            
            log.success('绘制驾车路线完成')
        }else{
            log.error('获取驾车数据失败：' + result)
        }
    });
</script>

• 可拖拽驾车路线规划

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 与经纬度信息进行货车路线规划。

<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值&plugin=AMap.TruckDriving'></script> 

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进行步行路线规划。

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值&plugin=AMap.Walking"></script>

//步行导航
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进行骑行路线规划

 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值&plugin=AMap.Riding"></script>

//骑行导航
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进行公交路线规划。

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=您申请的key值&plugin=AMap.Transfer"></script>

 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) {});