百度地图API:根据起始点经纬度坐标确认最佳路线规划

简介: 百度地图API:根据起始点经纬度坐标确认最佳路线规划

css样式

        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
        #allmap {
            width: 100%;
            height: 92%;
            position: relative;
        }
        .panel {
            position: absolute;
            padding: 20px;
            z-index: 9999;
        }
        #info {
            margin: 10px;
        }


HTML文档

<div class="panel">
    <div class="demoTable lay_search">
        <div class="layui-inline"><input type="text" class="layui-input lay_input1" placeholder="点击地图选择起点" id="start"
                                         autocomplete="off"></div>
        <div class="layui-input-inline"><select name="end" id="end" class="layui-input"></select></div>
        <button class="layui-btn lay_btn1" data-type="reload" id="search">查询</button>
    </div>
</div>
<div id="allmap"></div>
<div id="info"></div>


百度地图API

 //终点数据;
    var endData = [
        {id: 0, name: '北京动物园', lng: 116.344478, lat: 39.948353},
        {id: 1, name: '北京西站', lng: 116.330105, lat: 39.902538},
        {id: 2, name: '海淀公园', lng: 116.302509, lat: 39.991484},
        {id: 3, name: '北京大兴国际机场', lng: 116.426116, lat: 39.512641},
        {id: 4, name: '北京天安门', lng: 116.404053, lat: 39.915046},
        {id: 5, name: '中国国家博物馆', lng: 116.406568, lat: 39.911393}
    ];
    var endHtml = "";
    endHtml += " <option value=\"\">选择终点</option>";
    for (var i = 0; i < endData.length; i++) {
        endHtml += " <option value=" + endData[i].id + ">" + endData[i].name + "</option>"
    }
    $("#end").html(endHtml);
    //百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom("北京市", 15);
    map.enableScrollWheelZoom(true);
    //单击地图获取起点位置;
    var geocoder = new BMap.Geocoder();
    map.addEventListener("click", function (e) {
        geocoder.getLocation(e.point, function (rs) {
            $("#start").val(rs.address + "," + rs.point.lng + "," + rs.point.lat);
        });
    });
    //默认路线;
    getDis('北京天安门', '116.404053', '39.512641', '北京动物园', '116.344478', '39.948353');
    //查询路线;
    $("#search").click(function () {
        var startv = $("#start").val();
        var endv = $("#end").val();
        if (startv == "") {
            alert("起点不能为空");
            $("#start").focus();
            return false;
        }
        if (endv == "") {
            alert("终点不能为空");
            $("#send").focus();
            return false;
        }
        var sname = startv.split(",")[0];
        var lng1 = startv.split(",")[1];
        var lat1 = startv.split(",")[2];
        var ename = endData[endv].name;
        var lng2 = endData[endv].lng;
        var lat2 = endData[endv].lat;
        //获取线路;
        getDis(sname, lng1, lat1, ename, lng2, lat2);
    })
    //获取距离和时间;
    function getDis(sname, lng1, lat1, ename, lng2, lat2) {
        map.clearOverlays();
        var output = "起点:" + sname + "至 终点:" + ename + " 时间:";
        var searchComplete = function (results) {
            if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
                return;
            }
            var plan = results.getPlan(0);
            output += plan.getDuration(true) + "\n";
            output += "总路程为:";
            output += plan.getDistance(true) + "\n";
        }
        var transit = new BMap.DrivingRoute(map, {
            renderOptions: {map: map},
            onSearchComplete: searchComplete,
            onPolylinesSet: function () {
                $("#info").html(output);
            }
        });
        var start = new BMap.Point(lng1, lat1);
        var end = new BMap.Point(lng2, lat2);
        transit.search(start, end);
    }

完整代码:https://download.csdn.net/download/weixin_41290949/23551344

lockdatav Done!


相关文章
|
4月前
|
API
国外地区经纬度查询免费API接口教程
此接口用于查询国外地区的经纬度信息,支持POST和GET请求方式。需提供用户ID、用户KEY、省级名称及具体地点。返回数据包括地区名称(中英文)、国家代码及经纬度等详细信息。示例请求与响应数据详见文档。
158 29
|
6月前
|
自然语言处理 算法 Java
地址描述转换为坐标点不使用API,有什么转换的方法?
地址描述转换为坐标点不使用API,有什么转换的方法?
423 64
|
4月前
|
API
全国行政区划代码与经纬度查询免费API接口教程
该接口提供全国各行政区划代码及经纬度查询服务。通过POST或GET请求,输入用户ID、KEY及地点名称,可获取地区代码、省份、市级、区县级名称及经纬度等信息。示例URL:https://cn.apihz.cn/api/other/xzqhdm.php?id=88888888&key=88888888&sheng=北京&place=北京。返回数据包含状态码、信息提示及查询结果。
518 14
|
4月前
|
新能源 API
百科-百度免费API接口教程
该接口用于从百度百科获取指定名词的基础解释。支持POST或GET请求,需提供用户ID、用户KEY及查询内容。返回状态码和解释内容或错误提示。示例:https://cn.apihz.cn/api/zici/baikebaidu.php?id=88888888&key=88888888&words=汽车。建议使用个人ID与KEY以享受更高调用频次。
|
4月前
|
API
表情包-百度版免费API接口教程
该接口用于通过指定关键词从百度渠道获取表情包,支持POST或GET请求。需提供用户ID和KEY,可选参数包括关键词、页码及结果数量。返回数据包含状态码、信息提示、结果集等。示例中ID与KEY为公共测试用,建议使用个人ID与KEY以享受更高调用频率。
|
4月前
|
API
通用图片搜索-百度源免费API接口教程
该接口用于搜索百度图片,支持通过关键词、页码、结果数量等参数获取图片搜索结果。请求方式为POST或GET,需提供用户ID和KEY,可选参数包括关键词、页码、结果数量及返回源类型。返回结果包含状态码、信息提示、结果集、当前页码、最大页码和结果数量。示例中提供了GET和POST请求方法及返回数据示例。
|
4月前
|
API
全球天气预报5天-经纬度版免费API接口教程
该接口提供全球任意地区未来5天的天气预报,需输入经纬度参数。支持POST和GET请求方式,返回数据包括天气、气温、气压等详细信息。请求需包含用户ID和KEY,详情及示例参见文档。
|
7月前
|
JavaScript 前端开发 定位技术
百度地图JavaScript API v2.0创建地图
百度地图JavaScript API v2.0创建地图
96 0
|
8月前
|
算法 API 定位技术
谷歌地图 | 路线优化 API 助力企业解锁物流新潜能
Google Maps Platform推出了路线优化API,旨在提升企业车队效率和客户满意度。此API允许分配任务、规划多站点路线,处理实时变动,支持复杂调度,并适应不同业务目标。希腊电商Skroutz利用该API提高了配送准时率和驾驶员效率。API依托Google的运筹学算法,解决大规模车辆路线问题,适用于物流、医疗、现场服务等多个行业。合作伙伴如埃森哲已成功应用此技术优化物流。路线优化API现全面开放,助力企业降低成本,实现可持续发展。
106 3
|
8月前
|
JavaScript 前端开发 定位技术
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
362 0

热门文章

最新文章