|
- <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(116.404, 39.915), 11);
- map.enableScrollWheelZoom(true);
-
- //起始点
- var p1 = new BMap.Point(116.301934,39.977552);
- var p2 = new BMap.Point(116.508328,39.919141);
- //途经点
- var p3 = new BMap.Point(116.405628,39.9139721);//天安门
- var p4 = new BMap.Point(116.455646,39.937433);//体育馆
-
- //行车路线规划实例
- var driving = new BMap.DrivingRoute(map, { renderOptions:{ map: map, autoViewport: true} ,onPolylinesSet:function(Route){
- //当线条添加完成时调用
- for(var i=0;i<Route.length;i++){
- var polyline = Route[i].getPolyline();//获取线条遮挡物
- polyline.setStrokeColor("#38CA69");//设置颜色
- polyline.setStrokeWeight(5);//设置宽度
- polyline.setStrokeOpacity(1);//设置透明度
- }
- console.log(Route);
- },onMarkersSet:function(routes) {
- //当地图标记添加完成时调用
- for (var i = 0; i <routes.length; i++) {
- //判断是否是途经点
- if(typeof(routes[i].Km)=="undefined"){
- map.removeOverlay(routes[i].marker); //删除起始默认图标
- }else{
- map.removeOverlay(routes[i].Km); //删除途经默认图标
- }
- }
- }
- });
-
- driving.enableAutoViewport();//自动调整层级
-
- //自定义起点图标
- var m = new BMap.Marker(p1);
- m.setIcon(new BMap.Icon('http://demo.dingwei.cn/xingfou/public/Home/img/icon_21-25.png',new BMap.Size(20, 26),{anchor: new BMap.Size(10, 26)}));
- map.addOverlay(m);
- //自定义终点图标
- var m = new BMap.Marker(p2);
- m.setIcon(new BMap.Icon('http://demo.dingwei.cn/xingfou/public/Home/img/icon_21-25.png',new BMap.Size(20, 26),{anchor: new BMap.Size(10, 26)}));
- map.addOverlay(m);
- //自定义途经图标
- var m = new BMap.Marker(p3);
- m.setIcon(new BMap.Icon('http://demo.dingwei.cn/xingfou/public/Home/img/icon_21-25.png',new BMap.Size(20, 26),{anchor: new BMap.Size(10, 26)}));
- map.addOverlay(m);
- //自定义途经图标
- var m = new BMap.Marker(p4);
- m.setIcon(new BMap.Icon('http://demo.dingwei.cn/xingfou/public/Home/img/icon_21-25.png',new BMap.Size(20, 26),{
- anchor: new BMap.Size(10, 26)//这是图标的偏移量,一般x设置为 图片宽度一半,高度想等,就正确了
-
- }));
- map.addOverlay(m);
-
- driving.search(p1, p2,{waypoints:[p3,p4]});//waypoints表示途经点
-
- // driving.setPolylinesSetCallback(result => {
- // 清除路线规划 重新设置路线颜色
- // driving.clearResults();
- // const points = [];
- // result[0].Oq.forEach(item => {
- // points.push(new window.BMap.Point(item.lng, item.lat));
- // });
- // const polyline = new window.BMap.Polyline(points, {
- // strokeColor: '#6BC600',
- // strokeWeight: 3,
- // strokeOpacity: 0.8,
- // });
- // 创建折线
- // map.addOverlay(polyline);
- // });
-
- // 起点终点重新添加图标
- // const startIcon = new window.BMap.Icon(
- // require('../../../public/start.png'),
- // new window.BMap.Size(30, 120),
- // { anchor: new BMap.Size(10, 25) }
- // );
- // const endIcon = new window.BMap.Icon(
- // require('../../../public/start.png'),
- // new window.BMap.Size(30, 120),
- // { anchor: new window.BMap.Size(10, 25) }
- // );
-
- // driving.setMarkersSetCallback(result => {
- // result[0].marker.setIcon(startIcon);
- // result[1].marker.setIcon(endIcon);
- // });
-
- // 搜索成功后得回调
- // driving.setSearchCompleteCallback(() => {
- // 通过驾车实例,获得一系列点的数组
- // const pts = driving
- // .getResults()
- // .getPlan(0)
- // .getRoute(0)
- // .getPath();
- // const polyline = new window.BMap.Polyline(pts);
- // map.addOverlay(polyline);
- // });
-
- </script>
复制代码
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?立即注册
x
|