<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">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eYf9sA6yVTFHlh9ytU4a0EYY"></script>
<title>自定义公交路线途经点</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(109.703348,28.265934), 20);
map.enableScrollWheelZoom();
var points = []; //用来存储折线的点
var polyline;
var doneDraw = 0; //判断是否绘制折线结束
var point1;
var flag = true; //判断是否第一次点击
// let pathPoint = [
// new BMap.Point(109.704558,28.26863),
// new BMap.Point(109.708855,28.263623),
// new BMap.Point(109.710557,28.261261)
// ];
// console.log(pathPoint)
var driving = new BMap.TransitRoute(map, {
renderOptions:{
map: map,
autoViewport: true
}
});
// driving.search(p1, p2,{
// waypoints:["吉首市政府","吉首新古城宾馆"]
// });//waypoints表示途经点
// 绘制marker (起点、经点、终点)
function drawPoint(point){
let marker = new BMap.Marker(point);
this.map.addOverlay(marker);
}
//地图单击事件
map.addEventListener("click", function (e) {
console.log(e.point.lng + ", " + e.point.lat);
drawPoint(new BMap.Point(e.point.lng,e.point.lat))
// 存第一次点击为始点
if(flag){
flag = false;
point1 = new BMap.Point(e.point.lng,e.point.lat);
}
//判断是否绘制曲线完毕
if (doneDraw == 0) {
//存储曲线上每个点的经纬度
points.push(new BMap.Point(e.point.lng, e.point.lat))
if (polyline) {
polyline.setPath(points);
} //如果曲线存在,则获取折线上的点 setPath(points)
else {
polyline = new BMap.Polyline(points);
} //如果折线不存在,就增加此点
if (points.length < 2) {
return;
} //当折线上的点只有一个时,不绘制
map.addOverlay(polyline); //绘制曲线
}
});
//当鼠标双击时:结束绘制,并可以编辑曲线
map.addEventListener("dblclick", function (e) {
console.log("dblclick" + ", " + e.point.lng + ", " + e.point.lat)
// 存最后一次点击为终点
var point2 = new BMap.Point(e.point.lng,e.point.lat);
drawPoint(new BMap.Point(e.point.lng,e.point.lat))
driving.search(
point1,
point2,
{
waypoints:points
});//waypoints表示途经点
alert("绘制完成");
doneDraw = 10;
//polyline.enableEditing();// 设置可编辑
});
</script>
自定义公交路线途经点
最新推荐文章于 2021-05-30 19:10:33 发布