// 获取链接后面的参数

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

}

]

});

}

在html页面中引入腾讯地图,html引入腾讯地图相关推荐

  1. 在JSP页面中使用Ajax主题时的引入

    struts2.0到struts2.1有一个重要的改变就是对ajax支持的改变,struts2.0的ajax支持主要以DWR和dojo为主,并专门提供ajax主题,如:<struts:head ...

  2. JSP页面中引入js文件

    1)引入的js文件出错,  检查方法:将Js的内容写在当前的页面的<script> </script>之间,看是否能够正常运行,如果不能,请核查代码  2) 如果引入的代码在当 ...

  3. 在jsp页面中实现格式化数字,百分比,货币

    当时的要求是在jsp页面中计算百分比 实现方法 1.引入Jstl的fmt指令 <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" ...

  4. html5页面中添加腾讯地图api

    html5页面中添加腾讯地图api: 点击地图出现详细的地图: 这是一个基于微信端的地图处理方案. 先看看html架构: <a id="aToMap" href=" ...

  5. php 离线 gis,在 Web 页面中使用离线地图

    1. 所需工具&插件: 1. MapDownloader (提取码: spx6) 2. 操作: 1. 参考:java离线地图web GIS制作 下载好所需地图瓦片,本文以百度地图/深圳为例 2 ...

  6. 如何在页面中添加地图

    如何在页面中添加地图 百度地图开放平台 在本节案例中,我会向大家展示如何在页面中添加地图. 前置准备 首先这里我选择百度地图API,首先你需要申请成为百度开发者点这里,接着你需要填写一些项目内容,最后 ...

  7. 一、高德地图的准备阶段-地图的页面中的显示

    目录 第一步:注册高德地图具体参考 第二步:首先新建空白项目具体参考 第三步:创建gitee仓库具体参考 第四步:把你新建的项目上传到gitee仓库 第五步:进入项目,NPM 方式安装使用 Loade ...

  8. 如何在HTML页面中插入百度地图

    在网页制作时,如果想要把企业地址以地图的形式插入HTML页面中,可以通过百度地图轻松实现,当然,前提是注册百度账号并且通过实名认证 网址:http://api.map.baidu.com/lbsapi ...

  9. 怎样在vue单页面中引入其他组件

    场景 在一个vue的单页面,假如是home.vue中要引入其他组件的内容. 页面结构如下: 实现 首先在components下新建组件Today_recommend.vue组件 <templat ...

  10. https 页面中引入 http 资源的解决方式

    相对协议 应用场景 浏览器默认是不允许在 https 里面引用 http 资源的,一般都会弹出提示框. 用户确认后才会继续加载,用户体验非常差. 而且如果在一个 https 页面里动态的引入 http ...

最新文章

  1. RabbitMQ 3.6.x 安装和配置--Linux篇
  2. 【Python3-OpenCV】实现实时摄像头人脸检测
  3. 自己动手实现OpenGL-OpenGL原来如此简单(三)
  4. Flink从入门到精通100篇(八)-美团点评是如何在 Flink平台建立 实时数仓的?
  5. 路痴的单身小菡 BFS求最短路径+DFS求路径数
  6. 纪中C组模拟赛总结(2019.7.9)
  7. ic读卡器设置工具_从Matlab被禁来看,给IC教育带来哪些启发?
  8. 前端基础-html-表格的结构标签(了解)
  9. 有监督学习和无监督学习_比监督学习做的更好:半监督学习
  10. c语言文件加密解密单词统计,C语言文件加密解密及单词统计程序.doc
  11. hdu 2046 骨牌铺方格
  12. Youki的C++命名规则
  13. 英特尔再现安全漏洞:2011年后计算机几乎全中枪,可窃取你的密码及数据
  14. CSUOJ 1111 三家人
  15. linux删除系统日志文件,Linux不小心删除日志文件syslog的解决方法
  16. 仓储管理毕业论文【含matlab优化算法】
  17. 历代易学经典名著(简介及电子书下载)V3.0版
  18. 还不了解游戏建模教程吗?看完这篇文章让你从小白变为油条
  19. Registry私有仓库搭建及认证【转】
  20. iOS 15.3+ SwiftUI中List子项目禁止被删除但头部仍显示删除按钮的解决

热门文章

  1. 4.2.7 文字编辑
  2. 『.NET Tools』C#/.NET 计算文本相似度
  3. ISP算法----基本DPC算法实现代码
  4. 【ARM Linux 系统稳定性分析入门及渐进 1 -- Crash 工具简介】
  5. go 服务接入短信验证码功能(对接阿里云平台)
  6. 2021年 Java 面试题集锦 -- 持续更新
  7. XXL-JOB快速安装使用教程
  8. SecureCRT和SecureFX
  9. java调用MySQL数据库
  10. 【约束】唯一键和主键在已存在索引的字段上创建和直接创建的区别