【百度地图API】制作多途经点的线路导航

先创建一张地图的容器：

     <div class="pos-a" id="allmap"style="width: 100%; height: 95.5%;"></div>

然后实例化地图：

 var map = new BMap.Map('allmap');map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);map.enableScrollWheelZoom(true);

创建几个坐标点对象。

     //起点var p1 = new BMap.Point(116.301934,39.977552);//途经点var p2 = new BMap.Point(116.319876,39.943319);//豪柏大厦var p3 = new BMap.Point(116.405628,39.9139721);//天安门var p4 = new BMap.Point(116.455646,39.937433);//体育馆//终点var p5 = new BMap.Point(116.508328,39.919141);var points = [p1,p2,p3,p4,p5];

创建百度地图驾车实例：

//创建行车路线规划实例var driving = new BMap.DrivingRoute(map);  for(var i = 0;i<points.length;i++){if(i != points.length-1){driving.search(points[i], points[i+1]);  //绘制两个点之间的路线}}

完整代码：

<script type="text/javascript">// 百度地图API功能var map = new BMap.Map('allmap');map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);map.enableScrollWheelZoom(true);//起点var p1 = new BMap.Point(116.301934,39.977552);//途经点var p2 = new BMap.Point(116.319876,39.943319);//豪柏大厦var p3 = new BMap.Point(116.405628,39.9139721);//天安门var p4 = new BMap.Point(116.455646,39.937433);//体育馆//终点var p5 = new BMap.Point(116.508328,39.919141);var points = [p1,p2,p3,p4,p5];//起点var mp1 = points[0];//终点var mp2 = points[points.length-1];map.clearOverlays();                        //清除地图上所有的覆盖物//创建行车路线规划实例var driving = new BMap.DrivingRoute(map);  for(var i = 0;i<points.length;i++){if(i != points.length-1){driving.search(points[i], points[i+1]);  //绘制两个点之间的路线}}//显示终点和起点的标注driving.setSearchCompleteCallback(function(){var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组        var polyline = new BMap.Polyline(pts);             map.addOverlay(polyline);                var m1 = new BMap.Marker(mp1);         //起点  var m2 = new BMap.Marker(mp2);        //终点map.addOverlay(m1);        map.addOverlay(m2);                var lab1 = new BMap.Label("起点",{position:mp1});        var lab2 = new BMap.Label("终点",{position:mp2});           map.addOverlay(lab1);        map.addOverlay(lab2);                setTimeout(function(){map.setViewport(points);          //调整到最佳视野        },1000);});</script>

【百度地图API】制作多途经点的线路导航相关推荐

【百度地图】制作多途经点的线路导航,模拟运动 (vue,typescript)
网上有从起点到终点的模拟线路和运动,途经点的比较少. 结合网上demo,再进行了一下修改. VUE (Typescript),先在index.html里引用 <!DOCTYPE html> ...
百度地图API制作类似百度地图的路线导航界面并实现简单的路线规划功能
之前我们讲了怎么在百度地图上设置Marker(如A点..) 和弹出框(跟随Marker的,Marker移动的时候也是会跟着移动的),接着又觉得百度地图自带的放大缩小不(fei)是(chang)很(de ...
使用百度地图API制作线路轨迹播放
1.使用百度地图API制作轨迹播放: 可应用于车辆跟踪.行驶线路回放.跑步行程的记录等地图应用场景, 1.1绘制静态轨迹图获取多个轨迹点point(必须包含经度.纬度) 使用polyline对象依次 ...
地图上制作线路的动画_使用百度地图API制作线路轨迹播放
1.使用百度地图API制作轨迹播放: 可应用于车辆跟踪.行驶线路回放.跑步行程的记录等地图应用场景, 1.1绘制静态轨迹图获取多个轨迹点point(必须包含经度.纬度) 使用polyline对象依次 ...
【百度地图API】如何制作多途经点的线路导航——驾车篇
摘要: 休假结束,酸奶×××要从重庆驾车去北京.可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ----------------------------------- ...
IOS开发百度地图API－用点生成路线，导航，气泡响应
原地址:http://blog.sina.com.cn/s/blog_68661bd80101k4rx.html IOS百度地图API开发自定义气泡,点击气泡自动生成路线,以及拖拽 IOS百度地图开发 ...
转：IOS开发百度地图API－用点生成路线，导航，气泡响应
IOS百度地图API开发自定义气泡,点击气泡自动生成路线,以及拖拽 IOS百度地图开发POISearch搜索附近停车场,附近加油站 IOS百度地图视角跳到用户当前位置 IOS百度地图开发实时路况 IO ...
【百度地图API】制作多途经点的线路导航——路线坐标规划
一.创建地图大家跟我一起来创建一张简单的地图: var map = new BMap.Map("container"); map.centerAndZoom(new BMap.P ...
【腾讯地图API】制作多途经点的线路导航——路线坐标规划
面试:你懂什么是分布式系统吗?Redis分布式锁都不会?>>> 最近百度地图转腾讯地图以前用过百度地图实现路线坐标规划,不过搜索了一些没有搜索到腾讯地图的路线坐标规划,于是参数 ...

【百度地图API】制作多途经点的线路导航

【百度地图API】制作多途经点的线路导航相关推荐

最新文章

热门文章