html引入腾讯地图导航
2024-06-01 12:13:00
需要再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 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"))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.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回调函数名，本例为cburl += "&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].distancevar duration = ret.result.routes[0].durationdistance = 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)//显示路线//标记起终点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.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": "我的位置"}]});//初始化infoWindowvar 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) {//设置infoWindowconsole.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 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_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>html引入腾讯地图导航相关推荐
- [微信小程序]小程序引入腾讯地图选点插件出现：未取得授权
问题:小程序引入腾讯地图选点插件出现:未取得授权 在微信小程序引入腾讯地图选点插件:官方文档 1.微信小程序接入腾讯地图服务,申请Key 2.在 app.json 中添加 "plugins& ...
- APP跳转百度、高德、腾讯地图导航
这个本来是一个很简单的需求,奈何我遇到了很奇葩的问题.最开始我用的是百度sdk中的跳转api,自己用小米和联想测试跳转没有问题,然而用户的魅蓝note5点击跳转没有任何响应,后来又陆续出现了华为met ...
- Vue引入腾讯地图（搜索获取定位）
效果: 申请腾讯地图 1.首先进入腾讯位置服务登陆/注册,地址:https://lbs.qq.com/ 2.进入控制台,点击左侧菜单应用管理-我的应用,点击右上方创建应用,填写内容如下 WebServ ...
- Android百度地图、高德地图、腾讯地图导航路线规划问题
Android百度地图.高德地图.腾讯地图导航路线规划 在最近的项目中,需求是用户选择某个地址需要进行导航时,弹出百度地图.高德地图和腾讯地图让用户选择.如果该用户手机中已安装对应的地图App,则 ...
- angular项目(TS)引入腾讯地图报找不到qq
文章目录 在angular项目中引入腾讯地图 问题解决 结尾 在angular项目中引入腾讯地图 在index.html文件中script标签加载API服务 <script charset=&q ...
- 腾讯地图导航(根据地址)
<?php $address = '北京市朝阳区焦化厂地铁站'; if (isset($_GET['address'])) {$address = $_GET['address']; } //百 ...
- 小程序--腾讯地图导航
小程序点击地址导航功能首先必须去腾讯地图申请账号并开通权限 地址:https://lbs.qq.com/dev/console/home 第一步: 申请完账号---------控制台--------- ...
- uniapp小程序中使用腾讯地图导航的功能
1,首先现在腾讯地图官网申请key 2,打开微信公众平台 设置>第三方设置>添加插件 搜索腾讯地图服务 进入后点击申请 在uniapp manifest.json中引入插件,添加圈中代码 ...
- android 跳转腾讯地图导航,Android 跳转到百度、高德、腾讯地图导航
项目中遇到的一个需求,跳转外部App进行步行导航.分别是百度.高德.腾讯. 东西不难但是每次都要去官方文档找(有时候会更新一些字段). 所以在此做下记录和分享. 腾讯地图 try { LatLng l ...
最新文章
- MySQL8与PG10：新版本下的较量谁更胜一筹？
- 【Flutter】Flutter 混合开发 ( 关联 Android 工程与 Flutter 工程 | 安卓页面中嵌入 Flutter 页面 | 安卓中启动 Flutter 页面 )
- lwip协议栈优化_干货分享 | KNI性能优化实践
- SD Price公式(例程，即Formula)
- boost::geometry::for_each_coordinate用法的测试程序
- k66 pit计时功能配置_PIT，JUnit 5和Gradle –仅需额外的一行配置
- 细数阿里达摩院2019年的十个Flag
- 在图片中选定任意凸多边形制作掩膜程序MATLAB
- 京东二面：MySQL 主从延迟、读写分离 7 种解决方案！
- Java中如何判断一个字符串是否为数字
- 具有审计表的实体框架
- Golang学习(10)——bufio包
- 区分错误类型_形象解释 Python 新手最容易犯的错误
- 排查MySQL同步延迟思路
- GD32实战14__RTC
- 使用C++对himawari8（9）卫星数据的读取
- 2021-2027全球及中国油田钻机行业研究及十四五规划分析报告
- 测试单核cpu和多核cpu执行java多线程任务的效率
- 哔哩哔哩(bilibili)视频下载-支持4K
- HashMap线程安全性问题
热门文章
- 隐藏在今日头条百亿市值背后的算法：巨大可能与现实困境
- 并发线程和线程间通信（event、mailbox和semaphore）-systemVerilog
- Linux里面的oa环境是什么,Linux下oa环境搭建
- 【云原生 | 13】手把手教你搭建ferry开源工单系统
- 核心微生物分析_科学网—微生物组核心OTU鉴定usearch otutab_core - 刘永鑫的博文...
- android 仿支付宝动画,自定义view之仿支付宝动画
- 黑客是如何入侵服务器的，常见的攻击手段有哪些
- 不要浪费一场好危机(丘吉尔）
- java mongodb 查询 游标_MongoDB find()方法：查询数据
- 清除session ,清除cookie