在html页面中引入腾讯地图,html引入腾讯地图

// 获取链接后面的参数

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: '',

timestamp: '',

nonceStr: '',

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": "

目的地"

}, {

"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

}

]

});

}