百度地图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!


相关文章
|
5月前
|
缓存 API 定位技术
使用Python调用百度地图API实现地址查询
使用Python调用百度地图API实现地址查询
297 0
|
9天前
|
自然语言处理 算法 Java
地址描述转换为坐标点不使用API,有什么转换的方法?
地址描述转换为坐标点不使用API,有什么转换的方法?
184 64
|
2月前
|
JavaScript 前端开发 定位技术
百度地图JavaScript API v2.0创建地图
百度地图JavaScript API v2.0创建地图
36 0
|
3月前
|
算法 API 定位技术
谷歌地图 | 路线优化 API 助力企业解锁物流新潜能
Google Maps Platform推出了路线优化API,旨在提升企业车队效率和客户满意度。此API允许分配任务、规划多站点路线,处理实时变动,支持复杂调度,并适应不同业务目标。希腊电商Skroutz利用该API提高了配送准时率和驾驶员效率。API依托Google的运筹学算法,解决大规模车辆路线问题,适用于物流、医疗、现场服务等多个行业。合作伙伴如埃森哲已成功应用此技术优化物流。路线优化API现全面开放,助力企业降低成本,实现可持续发展。
|
3月前
|
JavaScript 前端开发 定位技术
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
154 0
|
4月前
|
域名解析 JavaScript 网络协议
技术心得记录:如何使用google地图的api(整理)
技术心得记录:如何使用google地图的api(整理)
329 0
|
4月前
|
Java API Apache
详尽分享百度翻译api
详尽分享百度翻译api
82 0
|
5月前
|
定位技术 API
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
Angular 调用导入百度地图API接口,2024春招BAT面试真题详解
|
5月前
|
数据采集 分布式计算 DataWorks
DataWorks产品使用合集之DataWorks数据地图中的数据发现相关api接口调用如何解决
DataWorks作为一站式的数据开发与治理平台,提供了从数据采集、清洗、开发、调度、服务化、质量监控到安全管理的全套解决方案,帮助企业构建高效、规范、安全的大数据处理体系。以下是对DataWorks产品使用合集的概述,涵盖数据处理的各个环节。
45 0
|
5月前
|
自然语言处理 API 语音技术
Python加百度语音API实现文字转语音功能
Python加百度语音API实现文字转语音功能
162 0