【行车路径规划】百度地图API，行车路径规划 起始点+途经点
生活随笔
收集整理的這篇文章主要介紹了
【行车路径规划】百度地图API，行车路径规划 起始点+途经点
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
為什么80%的碼農都做不了架構師？>>> ??
這是 行車路線規劃 通過 起始點， 和途經點，繪制出來的路線
<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表示途經點</script>轉載于:https://my.oschina.net/Peron/blog/913188
總結
以上是生活随笔為你收集整理的【行车路径规划】百度地图API，行车路径规划 起始点+途经点的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： explain mysql语句_使用 e
- 下一篇： 2021数学建模C题详细思路，代码，论文