百度地图 获取两坐标点之间的驾车路线所有坐标
<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">
var map = new BMap.Map("allmap", {
enableMapClick: false
});
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(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>