在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
}
]
});
}
在html页面中引入腾讯地图,html引入腾讯地图相关推荐
- 在JSP页面中使用Ajax主题时的引入
struts2.0到struts2.1有一个重要的改变就是对ajax支持的改变,struts2.0的ajax支持主要以DWR和dojo为主,并专门提供ajax主题,如:<struts:head ...
- JSP页面中引入js文件
1)引入的js文件出错, 检查方法:将Js的内容写在当前的页面的<script> </script>之间,看是否能够正常运行,如果不能,请核查代码 2) 如果引入的代码在当 ...
- 在jsp页面中实现格式化数字,百分比,货币
当时的要求是在jsp页面中计算百分比 实现方法 1.引入Jstl的fmt指令 <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" ...
- html5页面中添加腾讯地图api
html5页面中添加腾讯地图api: 点击地图出现详细的地图: 这是一个基于微信端的地图处理方案. 先看看html架构: <a id="aToMap" href=" ...
- php 离线 gis,在 Web 页面中使用离线地图
1. 所需工具&插件: 1. MapDownloader (提取码: spx6) 2. 操作: 1. 参考:java离线地图web GIS制作 下载好所需地图瓦片,本文以百度地图/深圳为例 2 ...
- 如何在页面中添加地图
如何在页面中添加地图 百度地图开放平台 在本节案例中,我会向大家展示如何在页面中添加地图. 前置准备 首先这里我选择百度地图API,首先你需要申请成为百度开发者点这里,接着你需要填写一些项目内容,最后 ...
- 一、高德地图的准备阶段-地图的页面中的显示
目录 第一步:注册高德地图具体参考 第二步:首先新建空白项目具体参考 第三步:创建gitee仓库具体参考 第四步:把你新建的项目上传到gitee仓库 第五步:进入项目,NPM 方式安装使用 Loade ...
- 如何在HTML页面中插入百度地图
在网页制作时,如果想要把企业地址以地图的形式插入HTML页面中,可以通过百度地图轻松实现,当然,前提是注册百度账号并且通过实名认证 网址:http://api.map.baidu.com/lbsapi ...
- 怎样在vue单页面中引入其他组件
场景 在一个vue的单页面,假如是home.vue中要引入其他组件的内容. 页面结构如下: 实现 首先在components下新建组件Today_recommend.vue组件 <templat ...
- https 页面中引入 http 资源的解决方式
相对协议 应用场景 浏览器默认是不允许在 https 里面引用 http 资源的,一般都会弹出提示框. 用户确认后才会继续加载,用户体验非常差. 而且如果在一个 https 页面里动态的引入 http ...
最新文章
- RabbitMQ 3.6.x 安装和配置--Linux篇
- 【Python3-OpenCV】实现实时摄像头人脸检测
- 自己动手实现OpenGL-OpenGL原来如此简单(三)
- Flink从入门到精通100篇(八)-美团点评是如何在 Flink平台建立 实时数仓的?
- 路痴的单身小菡 BFS求最短路径+DFS求路径数
- 纪中C组模拟赛总结(2019.7.9)
- ic读卡器设置工具_从Matlab被禁来看,给IC教育带来哪些启发?
- 前端基础-html-表格的结构标签(了解)
- 有监督学习和无监督学习_比监督学习做的更好:半监督学习
- c语言文件加密解密单词统计,C语言文件加密解密及单词统计程序.doc
- hdu 2046 骨牌铺方格
- Youki的C++命名规则
- 英特尔再现安全漏洞:2011年后计算机几乎全中枪,可窃取你的密码及数据
- CSUOJ 1111 三家人
- linux删除系统日志文件,Linux不小心删除日志文件syslog的解决方法
- 仓储管理毕业论文【含matlab优化算法】
- 历代易学经典名著(简介及电子书下载)V3.0版
- 还不了解游戏建模教程吗?看完这篇文章让你从小白变为油条
- Registry私有仓库搭建及认证【转】
- iOS 15.3+ SwiftUI中List子项目禁止被删除但头部仍显示删除按钮的解决