百度地图 获取两坐标点之间的驾车路线所有坐标
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> #box { width: 100%; height: 100%; display: flex; } .iput { margin: 20px; } #allmap { width: 60%; height: 100%; } button { width: 100px; height: 30px; background-color: #108CEE; font-size: 16; color: white; } #content { font-size: 16px; color: #000; width: 40%; height: 100%; text-align: center; } #content input { height: 30px; width: 465px; } </style> <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度key&plugin=AMap.Driving"></script> <title>起点和终点之间的百度轨迹坐标</title> </head> <body> <div id="box"> <div id="content"> <h3>起点和终点之间的百度轨迹坐标</h3> <div class="iput"> 开始经度纬度：<input type="text" placeholder="示例:109.343826,35.006431" name="" id="loglat_one" value="" /></div> <div class="iput">结束经度纬度：<input type="text" name="" placeholder="示例:109.399019,34.761730" id="loglat_two" value="" /></div> <div style="text-align: center;"> <button type="button" style="" onclick="loadLine()">绘线</button></div> <div><br /><textarea rows="34" cols="80" id="point"></textarea></div> </div> <div id="allmap"> </div> </div> </body> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap", { enableMapClick: false //关闭鼠标默认点击 }); //创建Map实例 //初始化 调用centerAndZoom方法对地图初始化 map.centerAndZoom(new BMap.Point(116.404, 39.915), 13); map.enableScrollWheelZoom(); map.addControl(navigationControl); var longpatStr var reg = /,$/gi; //此处是正则 function loadLine() { var loglat_one = $("#loglat_one").val() var loglat_two = $("#loglat_two").val() // var myP1 = new BMap.Point(109.3438260696798,35.00643134507001); //起点 // var myP2 = new BMap.Point(109.39901976017374,34.76173083440453); //终点 var myP1 = new BMap.Point(parseFloat(loglat_one.split(",")[0]), parseFloat(loglat_one.split(",")[1])); //起点 var myP2 = new BMap.Point(parseFloat(loglat_two.split(",")[0]), parseFloat(loglat_two.split(",")[1])); //终点 var driving = new BMap.DrivingRoute(map, { onSearchComplete: function(results) { if (driving.getStatus() == BMAP_STATUS_SUCCESS) { longpatStr = ""; var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例，获得一系列点的数组 var paths = pts.length; for (var i = 0; i < paths; i++) { console.log(pts[i].lng + " " + pts[i].lat); longpatStr += parseFloat(pts[i].lat) + "|" + parseFloat(pts[i].lng) + "," } longpatStr = longpatStr.replace("undefined", ""); longpatStr = longpatStr.replace(reg,""); $("#point").val(longpatStr) line(longpatStr) } } }, { renderOptions: { map: map, autoViewport: true } }); //驾车实例 driving.search(myP1, myP2); } function line(lonlat) { var co = lonlat.split(","); var pointAttr = new Array(); for (var i = 0; i < co.length-1; i++) { var loglats = co[i].split("|") var point = new BMap.Point(loglats[1], loglats[0]) pointAttr.push(point); } var polyline = new BMap.Polyline(pointAttr, { strokeColor: "#cc0000", strokeWeight: 5, strokeOpacity: 0.5 }); map.addOverlay(polyline); var loglats = co[0].split("|") map.centerAndZoom(new BMap.Point(loglats[1], loglats[0]), 13); } </script></html>
末蓝、
怼烎@
ゞ 浴缸里的玫瑰
我就是我
还没有评论，来说两句吧...