Recently, baidu map has been used to realize route coordinate planning before converting Baidu map to Tencent map. However, some route coordinate planning without Tencent map has been searched, so Baidu wrote a route coordinate planning of Tencent map
What's different between the two maps is that Baidu map has a way when navigating. Tencent map doesn't have one. So it can only be executed circularly. Maybe the efficiency is a little bit lower
<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: "Microsoft YaHei";} </style><script charset="utf-8" src="https://Map. QQ. COM / API / JS? V = 2. Exp & key = Tencent map key "> < / script > <title>Set driving route</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> var porints=[ {"name":"Coordinate 3","xy":[114.483629,38.031341]}, {"name":"Coordinate 1","xy":[114.484815,38.025003]}, {"name":"Coordinate 2","xy":[114.521142,38.041544]}, {"name":"Coordinate 4","xy":[114.518304,38.049132]} ]; var map,markersArray = [],route_lines=[]; // Create Map instance 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; //All alternative route options for(var i = 0;i < directions_routes.length; i++){ var route = directions_routes[i]; //map.fitBounds(response.detail.bounds); / / adjust the map window to display all routes 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 means the passing point } } function makemarker(center,name){ var marker=new qq.maps.Marker({position:center,map:map});// Create annotation 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);//Display track </script>
Here's the effect
