需要再http协议上打开，并且绑定过公众号，并把页面放到服务器上。否则打开则是空白页面
链接后面需要带目的地坐标参数（或者从接口获取，但是一定要有一个目的地经纬度）。
&latitude=28.662031&longitude=115.919083
点击导航页面代码里已经把目的地参数传到腾讯地图页，自动规划线路
再点击导航就跳转到了腾讯地图APP，已经下载了腾讯地图APP的会自动导航，没有下载的则是要下载腾讯地图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>地图</title>
</head>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=GV4BZ-COE3X-AAN45-TW4LF-GVVMF-SYBT4"></script>
<style>html,body {height: 100%;margin: 0px;padding: 0px;}#mapContainer {width: 100%;height: 92%;}.adres {width: 9rem;display: flex;flex-direction: column;align-items: center;}.top-lx {position: fixed;bottom: 0;/* margin: 0.3rem; */display: flex;flex-direction: row;align-items: center;height: 8%;background: #fff;font-weight: 600;font-family: "宋体";padding: 0.6rem 0;box-sizing: border-box;justify-content: space-around;width: 100%;}.addressdata {color: #000;box-sizing: border-box;margin-right: 1rem;border-right: 2px solid #aaa;height: 65%;padding-right: 1rem;font-size: 1rem;padding-left: 0.5rem;}.timedata {color: #000;height: 68%;font-size: 1rem;}.dao {position: fixed;bottom: 15%;left: 35%;background: #3777FF;border: none;padding: 0.3rem 1rem;box-sizing: border-box;border-radius: 0.5rem;color: #fff;}.daohang {width: 8%;}
</style><body onload="">
<div id="mapContainer"></div>
<!-- <div></div> -->
<div class="top-lx"><div style="width: 80%;display: flex;"><div class="addressdata"><span id="distance"></span></div><div class="timedata"><span id="duration"></span></div></div><img class="daohang" onclick="daohang)"src="http://sucai.suoluomei.cn/sucai_zs/images/20200104171333-1173569cd5ffc726ca93e7230eb05ca.png" alt="">
</div><!-- <button class="dao">导航</button> -->
</body></html>
<script>// 获取链接后面的参数var latitudea = 0;var longitudea = 0;var latitude = 0;var longitude = 0;var lnglatXY = ""function GetQueryStringname) {var reg = new RegExp"^|&)" + name + "=[^&]*)&|$)");var r = window.location.search.substr1).matchreg);//search,查询？后面的参数，并匹配正则if r != null) return unescaper[2]); return null;}console.log"latitude", GetQueryString"latitude"))console.log"longitude", GetQueryString"longitude"))latitudea = GetQueryString"latitude")longitudea = GetQueryString"longitude")var map;wx.config{debug: false,appId: '<?php echo $signPackage["appId"];?>',timestamp: '<?php echo $signPackage["timestamp"];?>',nonceStr: '<?php echo $signPackage["nonceStr"];?>',signature: '<?php echo $signPackage["signature"];?>',jsApiList: [// 所有要调用的 API 都要加到这个列表中'chooseImage','uploadImage','scanQRCode','getLocation','openLocation']});wx.readyfunction ) {wx.getLocation{type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'success: function res) {if res.errMsg == "getLocation:ok") {console.log'res', res)longitude = res.longitude;latitude = res.latitude;lnglatXY = [res.longitude, res.latitude]; //已知点坐标console.log"13123", lnglatXY[1]);// initMaplnglatXY);//初始化地图map = new TMap.Map'mapContainer', {center: new TMap.LatLnglnglatXY[1], lnglatXY[0]),//地图显示中心点zoom: 11});//WebServiceAPI请求URL（驾车路线规划默认会参考实时路况进行计算）var url = "https://apis.map.qq.com/ws/direction/v1/driving/"; //请求路径url += "?from=" + lnglatXY[1] + "," + lnglatXY[0]; //起点坐标url += "&to=" + latitudea + "," + longitudea; //终点坐标url += "&output=jsonp&callback=cb"; //指定JSONP回调函数名，本例为cburl += "&key=GV4BZ-COE3X-AAN45-TW4LF-GVVMF-SYBT4"; //开发key，可在控制台自助创建//发起JSONP请求，获取路线规划结果jsonp_requesturl);cbret)display_polylinepl)}}})})//浏览器调用WebServiceAPI需要通过Jsonp的方式，此处定义了发送JOSNP请求的函数function jsonp_requesturl) {var script = document.createElement'script');script.src = url;document.body.appendChildscript);}//定义请求回调函数，在此拿到计算得到的路线，并进行绘制function cbret) {var coors = ret.result.routes[0].polyline, pl = [];//获取路线距离var distance = ret.result.routes[0].distancevar duration = ret.result.routes[0].durationdistance = distance / 1000$"#distance").text"距离:" + distance.toFixed2) + "公里")$"#duration").text"时长:" + duration + "分钟")console.logret)//坐标解压（返回的点串坐标，通过前向差分进行压缩）var kr = 1000000;for var i = 2; i < coors.length; i++) {coors[i] = Numbercoors[i - 2]) + Numbercoors[i]) / kr;}//将解压后的坐标放入点串数组pl中for var i = 0; i < coors.length; i += 2) {pl.pushnew TMap.LatLngcoors[i], coors[i + 1]));}display_polylinepl)//显示路线//标记起终点markervar marker = new TMap.MultiMarker{id: 'marker-layer',map: map,styles: {"start": new TMap.MarkerStyle{"width": 25,"height": 35,"anchor": { x: 16, y: 32 },"src": 'https://sucai.suoluomei.cn/sucai_zs/images/20191211151137-marker.png'}),"end": new TMap.MarkerStyle{"width": 35,"height": 35,"anchor": { x: 16, y: 32 },"src": 'http://sucai.suoluomei.cn/sucai_zs/images/20200104135819-moeaddress.png'})},geometries: [{"id": 'start',"styleId": 'start',"position": new TMap.LatLnglatitudea, longitudea),//接口渲染数据"title": "<div class='adres'><img style='width:100%;' src='" + image + "'></div><p style='margin:0;'>目的地</p>"}, {"id": 'end',"styleId": 'end',"position": new TMap.LatLnglnglatXY[1], lnglatXY[0]),//接口渲染数据"title": "我的位置"}]});//初始化infoWindowvar infoWindow = new TMap.InfoWindow{map: map,position: new TMap.LatLng39.984104, 116.307503),offset: { x: 0, y: -34 } //设置信息窗相对position偏移像素，为了使其显示在Marker的上方});infoWindow.close);//初始关闭信息窗关闭//marker点击事件marker.on"click", function evt) {//设置infoWindowconsole.log"点击了坐标")infoWindow.open); //打开信息窗infoWindow.setPositionevt.geometry.position);//设置信息窗位置infoWindow.setContentevt.geometry.title);//设置信息窗内容// infoWindow.setContentevt.geometry.position.toString));//设置信息窗内容})}function daohang) {// window.location.href="https://mapdownload.map.qq.com/index?channel=10029633&key=personal&referer=myapp"latitude longitudewindow.location.href = "https://apis.map.qq.com/uri/v1/routeplan?type=drive&from=我的位置&fromcoord=" + latitude + "," + longitude + "&to=目的地&tocoord=" + latitudea + "," + longitudea + "&policy=1&referer=GV4BZ-COE3X-AAN45-TW4LF-GVVMF-SYBT4"}function display_polylinepl) {//创建 MultiPolyline显示折线var polylineLayer = new TMap.MultiPolyline{id: 'polyline-layer', //图层唯一标识map: map,//绘制到目标地图//折线样式定义styles: {'style_blue': new TMap.PolylineStyle{'color': '#3777FF', //线填充色'width': 6, //折线宽度'borderWidth': 5, //边线宽度'borderColor': '#FFF', //边线颜色'lineCap': 'round' //线端头方式})},//折线数据定义geometries: [{'id': 'pl_1',//折线唯一标识，删除时使用'styleId': 'style_blue',//绑定样式名'paths': pl}]});}</script>