需要再http协议上打开，并且绑定过公众号，并把页面放到服务器上。否则打开则是空白页面
上一个页面跳转到该地图页面时，需要在链接上带上参数（目的地的经纬度以及目的地图片，下方模拟写了个）
&latitude=28.662031&longitude=115.919083&image=http://sucai.suoluomei.cn/sucai_zs/images/2020/01/04/732e0cdd24d5bc8fc35fea3561c31565.jpg
点击导航页面代码里已经把目的地参数传到腾讯地图页，所以会自动规划线路
再点击导航就跳转到了腾讯地图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 image = "";
var latitude = 0;
var longitude = 0;
var lnglatXY = ""
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
if (r != null) return unescape(r[2]); return null;
}
console.log("latitude", GetQueryString("latitude"))
console.log("longitude", GetQueryString("longitude"))
console.log("image", GetQueryString("image"))
latitudea = GetQueryString("latitude")
longitudea = GetQueryString("longitude")
image = GetQueryString("image")
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.ready(function () {
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]);
// initMap(lnglatXY);
//初始化地图
map = new TMap.Map('mapContainer', {
center: new TMap.LatLng(lnglatXY[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回调函数名，本例为cb
url += "&key=GV4BZ-COE3X-AAN45-TW4LF-GVVMF-SYBT4"; //开发key，可在控制台自助创建
//发起JSONP请求，获取路线规划结果
jsonp_request(url);
cb(ret)
display_polyline(pl)
}
}
})
})
//浏览器调用WebServiceAPI需要通过Jsonp的方式，此处定义了发送JOSNP请求的函数
function jsonp_request(url) {
var script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
}
//定义请求回调函数，在此拿到计算得到的路线，并进行绘制
function cb(ret) {
var coors = ret.result.routes[0].polyline, pl = [];
//获取路线距离
var distance = ret.result.routes[0].distance
var duration = ret.result.routes[0].duration
distance = distance / 1000
$("#distance").text("距离:" + distance.toFixed(2) + "公里")
$("#duration").text("时长:" + duration + "分钟")
console.log(ret)
//坐标解压（返回的点串坐标，通过前向差分进行压缩）
var kr = 1000000;
for (var i = 2; i < coors.length; i++) {
coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
}
//将解压后的坐标放入点串数组pl中
for (var i = 0; i < coors.length; i += 2) {
pl.push(new TMap.LatLng(coors[i], coors[i + 1]));
}
display_polyline(pl)//显示路线
//标记起终点marker
var 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.LatLng(latitudea, longitudea),//接口渲染数据
"title": "<div class='adres'><img style='width:100%;' src='" + image + "'></div><p style='margin:0;'>目的地</p>"
}, {
"id": 'end',
"styleId": 'end',
"position": new TMap.LatLng(lnglatXY[1], lnglatXY[0]),//接口渲染数据
"title": "我的位置"
}]
});
//初始化infoWindow
var infoWindow = new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(39.984104, 116.307503),
offset: { x: 0, y: -34 } //设置信息窗相对position偏移像素，为了使其显示在Marker的上方
});
infoWindow.close();//初始关闭信息窗关闭
//marker点击事件
marker.on("click", function (evt) {
//设置infoWindow
console.log("点击了坐标")
infoWindow.open(); //打开信息窗
infoWindow.setPosition(evt.geometry.position);//设置信息窗位置
infoWindow.setContent(evt.geometry.title);//设置信息窗内容
// infoWindow.setContent(evt.geometry.position.toString());//设置信息窗内容
})
}
function daohang() {
// window.location.href="https://mapdownload.map.qq.com/index?channel=10029633&key=personal&referer=myapp"latitude longitude
window.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_polyline(pl) {
//创建 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>
