[Tencent map API] making route navigation of multi-path points -- route coordinate planning

Keywords: Front-end Javascript

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;
       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
		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
        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]);
showPoly(arrayList);//Display track

Here's the effect

Posted by nashyboy on Mon, 02 Dec 2019 17:10:41 -0800