【騰訊地圖API】製做多途經點的線路導航——路線座標規劃

時間 2019-12-01

原文原文鏈接

最近百度地圖轉騰訊地圖之前用過百度地圖實現路線座標規劃,不過搜索了一些沒有搜索到騰訊地圖的路線座標規劃,因而參數百度的思路寫了個騰訊地圖的路線座標規劃.javascript

這兩家地圖有一點不同的就是在導航時百度地圖有途經點.騰訊地圖沒有.因此只能循環執行,可能效率會差一點吧.css

<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 charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=騰訊地圖key"></script>
 <title>設置駕車路線途經點</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript">
var porints=[
{"name":"座標3","xy":[114.483629,38.031341]},
{"name":"座標1","xy":[114.484815,38.025003]},
{"name":"座標2","xy":[114.521142,38.041544]},
{"name":"座標4","xy":[114.518304,38.049132]}
];
var map,markersArray = [],route_lines=[];            // 建立Map實例
 var center=new qq.maps.LatLng( porints[0]['xy'][1],porints[0]['xy'][0]);
var map=new qq.maps.Map(document.getElementById("allmap"),{center:center,zoom:16});
function showPoly(pointList) { 
	for (var i = 0; i < pointList.length; i++) {
	   var start =i;var end= i+1;
       if(!pointList[end])return;
       var driving =new qq.maps.DrivingService({
            complete : function(response){               
               directions_routes = response.detail.routes;
               //全部可選路線方案
               for(var i = 0;i < directions_routes.length; i++){
                    var route = directions_routes[i];
                    //map.fitBounds(response.detail.bounds); //調整地圖窗口顯示全部路線 
                    var polyline = new qq.maps.Polyline(
                        {
                            path: route.path,
                            strokeColor: '#3893F9',
                            strokeWeight: 6,
                            map: map
                        }
                    );route_lines.push(polyline);
               }
            }
        });
		driving.search(pointList[start], pointList[end]); //waypoints表示途經點
	}
}
function makemarker(center,name){
    var marker=new qq.maps.Marker({position:center,map:map});// 建立標註
    markersArray.push(marker);    
    if(name){
        var label = new qq.maps.Label({ content: name,map: map,
        offset: new qq.maps.Size(10, -50), 
        position: center, 
    });
    }
}
var arrayList = [];
for (var i in porints) {
	var p = porints[i].xy;
	var p1 =new qq.maps.LatLng(p[1],p[0]);
	arrayList.push(p1);    
    makemarker(p1,porints[i].name);
}
showPoly(arrayList);//顯示軌跡
</script>

下面是效果html