百度地图api - 百度地图 API 绘制路线
本文介绍了百度地图api - 百度地图 API 绘制路线的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
后台拿到数据返回给了jsp页面,并且显示到了地图上 。
现在要根据两个位点。绘制出他们之间的路线。
有实现过这个功能的大神,给指点一下,如果有实例,那当热是最好了。
下面是 : 我显示坐标的代码:
<script type="text/javascript">
var jsonArrayaf = document.getElementById("jsonArray").value;
function orbit(){
var jsonArraya = document.getElementById("jsonArray").value;
var jsonArray = eval(jsonArraya);
var points = [];
var map = new BMap.Map("l-map");
if (jsonArray != null) {
for (var i = 0; i < jsonArray.length; i++) {
(function(x) {
var point = new BMap.Point(jsonArray[x].longitude, jsonArray[x].latitude); // 创建点坐标
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point);
points.push(point);
var opts = {
width : 250, // 信息窗口宽度
height : 150, // 信息窗口高度
title : '<span style="font-size:15px;color:#0A8021">'
+ jsonArray[x].position + '</span>' // 信息窗口标题
}
var dateti=jsonArray[x].datetime;
var datet=dateti.split(",");
var content = "时间:";
for(var j=0;j<datet.length;j++){
content+=""+datet[j]+"<br/>";
}
// content+= "范围: "+ jsonArray[x].distance;
var info_Window = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
var mylable = new BMap.Label(jsonArray[x].position, {
offset : new BMap.Size(-40, 30)
});
mylable.setStyle({ //给label设置样式,任意的CSS都是可以的
fontSize : "14px", //字号
textAlign : "center", //文字水平居中显示
lineHeight : "14px", //行高,文字垂直居中显示
cursor : "pointer"
});
marker.setLabel(mylable);
map.addOverlay(marker);
// 百度地图的联动,在点击图标时,调用的方法。实现改变
marker.addEventListener("click", function() {
this.openInfoWindow(info_Window);
});
})(i);
}
}}
</script>
我的位点是存在json里面循环输出的,我需要修改哪里,才能实现,地图路线的绘制。
解决方案
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
var p1 = new BMap.Point(116.301934,39.977552);
var p2 = new BMap.Point(116.508328,39.919141);
var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
driving.search(p1, p2);
WalkingRoute 步行 TransitRoute 公交 DrivingRoute 驾车
这篇关于百度地图api - 百度地图 API 绘制路线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文