百度地图路径规划

2022-01-09 17:06:55 阅读：179 来源： 互联网

标签：路径地图 value BMap bdmap var new startPoint 百度

源码


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>百度地图路径规划</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ek5SWXmBxc7eXrlsIE0nvYqZKYqoHXsE"></script>
    <style>
        #bdmap-contaniner{
            width: 700px;
            height: 500px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<button class="createMap">加载地图</button>
<br/>
<label for="startPoint">
    起点：<input type="text"  id="startPoint"  value="冠县"/>
</label>
<label for="endPoint">
    终点：<input type="text"  id="endPoint"  value="聊城"/>
</label>
<select >
    <option value="car">驾车</option>
    <option value="bus">公交</option>
    <option value="step">步行</option>
</select>
<br/>
<button  class="route">开启规划路径</button>
<div id="bdmap-contaniner"></div>
<script>
    //页面元素
    var startPoint_input=document.querySelector('#startPoint');
    var endPoint_input=document.querySelector('#endPoint');
    var routeType_select=document.querySelector('select');
    var  bdmap=null;
    document.querySelector('.createMap').onclick= function () {
        bdmap=new BMap.Map('bdmap-contaniner');
        var point = new BMap.Point(115.43, 36.48);
        bdmap.centerAndZoom(point, 15);
        bdmap.addControl(new BMap.NavigationControl());

        var centerMarker=new BMap.Marker(point);
        centerMarker.addEventListener('click', function (eve) {
            var opts = {
                width : 250,     // 信息窗口宽度
                height: 100,     // 信息窗口高度
                title : "地点坐标"  // 信息窗口标题
            };
            var infoWindow_content='当前位置：('+eve.point.lng+','+eve.point.lat+')';
            var infoWindow = new BMap.InfoWindow(infoWindow_content, opts);  // 创建信息窗口对象
            bdmap.openInfoWindow(infoWindow, bdmap.getCenter());      // 打开信息窗口
        });
        bdmap.addOverlay(centerMarker);
    };
    //路径规划
    document.querySelector('.route').onclick= function () {
        var startPoint_value=startPoint_input.value;
        var endPoint_value=endPoint_input.value;
        var routeType_select_value=routeType_select.value;
        switch (routeType_select_value){
            case 'car':{
                //驾车路线规划
                var driving = new BMap.DrivingRoute(bdmap, {
                    renderOptions: {
                        map: bdmap,
                        autoViewport: true
                    }
                });
                //绘制
                driving.search(startPoint_value, endPoint_value);
            }
                break;
            case 'bus':{
                var transit = new BMap.TransitRoute(bdmap, {
                    renderOptions: {
                        map: bdmap,
                        autoViewport: true
                    }
                });
                transit.search(startPoint_value, endPoint_value);
            }break;
            case 'step':{
                var walk = new BMap.WalkingRoute(bdmap, {
                    renderOptions: {map: bdmap}
                });
                walk.search(startPoint_value, endPoint_value);
            }
                break;
        }
    }
</script>
</body>
</html>

标签：路径,地图,value,BMap,bdmap,var,new,startPoint,百度
来源： https://blog.csdn.net/m0_58719994/article/details/122395601

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

百度地图路径规划

源 码

源码