本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2024-11(4)

腾讯地图JavaScript API的应用

发布于2021-01-31 13:55     阅读(1416)     评论(0)     点赞(5)     收藏(4)


腾讯地图JavaScript API的应用

目录

前言

正文

注册腾讯位置服务账号

设置秘钥

获取秘钥

腾讯地图的开发文档

腾讯地图的JavaScript API

腾讯地图demo

总结


前言

随着社会的高速发展,手机地图已经成为了生活中不可或缺的一部分,他出现在各种app中,比如外卖app需要展示配送的路线和距离,导航的app需要路线规划和显示路线拥挤情况,社交app需要显示自己所在的位置和附近用户的位置。基本上只要你做的产品涉及到地图板块,你都需要引进相关地图api。那么对于开发者来说,怎么使用地图的api来完成我们的功能点就变的至关重要啦,这篇博客就讲解下腾讯地图JavaScript API的应用。

正文

注册腾讯位置服务账号

腾讯位置服务账号注册地址

点击上面的链接,填写注册信息,点击注册按钮进行注册即可

完成开发者验证,即可进行注册key

设置秘钥

 

获取秘钥

腾讯地图的开发文档

针对不同的平台,腾讯地图的api还是很全的

腾讯地图的JavaScript API

这里具体看下JavaScript API ,这是一个官方给的demo,如何创建地图,并设置地图初始化的参数,我们在源代码编辑器里去随意改变下参数,点击运行就出现代码运行的效果,很方便开发者理解这个功能的参数的作用和效果,而且贴心的还写了备注。

腾讯地图demo

一、使用场景,查询出发地到目的地路线规划,我们先看下路线规划的api给的例子,就知道接下来写代码的思路了,我们需要先获取用户输入的起点位置的坐标,在获取终点坐标的位置,然后调用接口获取路线规划的结果,最后根据结果绘画路线即可

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>折线应用: 路线规划</title>
  8. </head>
  9. <script charset="utf-8"
  10. src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
  11. <style>
  12. html,
  13. body {
  14. height: 100%;
  15. margin: 0px;
  16. padding: 0px;
  17. }
  18. #mapContainer {
  19. width: 100%;
  20. height: 100%;
  21. }
  22. </style>
  23. <body onload="initMap()">
  24. <div id="mapContainer"></div>
  25. </body>
  26. </html>
  27. <script>
  28. //注:本例仅为说明流程,不保证严谨
  29. var map;
  30. function initMap(){
  31. //初始化地图
  32. map = new TMap.Map('mapContainer', {
  33. center: new TMap.LatLng(39.980619,116.321277),//地图显示中心点
  34. zoom:14 //缩放级别
  35. });
  36. //WebServiceAPI请求URL(驾车路线规划默认会参考实时路况进行计算)
  37. var url="https://apis.map.qq.com/ws/direction/v1/driving/"; //请求路径
  38. url+="?from=39.984039,116.307630"; //起点坐标
  39. url+="&to=39.977263,116.337063"; //终点坐标
  40. url+="&output=jsonp&callback=cb" ; //指定JSONP回调函数名,本例为cb
  41. url+="&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"; //开发key,可在控制台自助创建
  42. //发起JSONP请求,获取路线规划结果
  43. jsonp_request(url);
  44. }
  45. //浏览器调用WebServiceAPI需要通过Jsonp的方式,此处定义了发送JOSNP请求的函数
  46. function jsonp_request(url){
  47. var script=document.createElement('script');
  48. script.src=url;
  49. document.body.appendChild(script);
  50. }
  51. //定义请求回调函数,在此拿到计算得到的路线,并进行绘制
  52. function cb(ret){
  53. var coords = ret.result.routes[0].polyline, pl = [];
  54. //坐标解压(返回的点串坐标,通过前向差分进行压缩)
  55. var kr = 1000000;
  56. for (var i = 2; i < coords.length; i++) {
  57. coords[i] = Number(coords[i - 2]) + Number(coords[i]) / kr;
  58. }
  59. //将解压后的坐标放入点串数组pl中
  60. for (var i = 0; i < coords.length; i += 2) {
  61. pl.push(new TMap.LatLng(coords[i], coords[i+1]));
  62. }
  63. display_polyline(pl)//显示路线
  64. //标记起终点marker
  65. var marker = new TMap.MultiMarker({
  66. id: 'marker-layer',
  67. map: map,
  68. styles: {
  69. "start": new TMap.MarkerStyle({
  70. "width": 25,
  71. "height": 35,
  72. "anchor": { x: 16, y: 32 },
  73. "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
  74. }),
  75. "end": new TMap.MarkerStyle({
  76. "width": 25,
  77. "height": 35,
  78. "anchor": { x: 16, y: 32 },
  79. "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
  80. })
  81. },
  82. geometries: [{
  83. "id": 'start',
  84. "styleId": 'start',
  85. "position": new TMap.LatLng(39.984039,116.307630307503)
  86. }, {
  87. "id": 'end',
  88. "styleId": 'end',
  89. "position": new TMap.LatLng(39.977263,116.337063)
  90. }]
  91. });
  92. }
  93. function display_polyline(pl){
  94. //创建 MultiPolyline显示折线
  95. var polylineLayer = new TMap.MultiPolyline({
  96. id: 'polyline-layer', //图层唯一标识
  97. map: map,//绘制到目标地图
  98. //折线样式定义
  99. styles: {
  100. 'style_blue': new TMap.PolylineStyle({
  101. 'color': '#3777FF', //线填充色
  102. 'width': 8, //折线宽度
  103. 'borderWidth': 5, //边线宽度
  104. 'borderColor': '#FFF', //边线颜色
  105. 'lineCap': 'round', //线端头方式
  106. })
  107. },
  108. //折线数据定义
  109. geometries: [
  110. {
  111. 'id': 'pl_1',//折线唯一标识,删除时使用
  112. 'styleId': 'style_blue',//绑定样式名
  113. 'paths': pl
  114. }
  115. ]
  116. });
  117. }
  118. </script>

二、具体的demo的代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>腾讯地图</title>
  6. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
  7. integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  8. <style type="text/css">
  9. * {
  10. margin: 0;
  11. padding: 0;
  12. }
  13. #container {
  14. /*地图(容器)显示大小*/
  15. width: 100%;
  16. height: 100%;
  17. z-index: 1;
  18. }
  19. .searchWrap {
  20. position: absolute;
  21. top: 30px;
  22. left: 30px;
  23. z-index: 2;
  24. }
  25. #list-group,
  26. #list-group2,
  27. .searchEnd {
  28. display: none;
  29. }
  30. #closeBtn {
  31. position: absolute;
  32. top: -10px;
  33. right: -14px;
  34. }
  35. .dropdown-menu .list-group-item.active{
  36. color: #fff;
  37. background-color: #007bff;
  38. border-color: #007bff;
  39. }
  40. </style>
  41. <!--引入Javascript API GL,参数说明参见下文-->
  42. <script src="https://map.qq.com/api/gljs?v=1.exp&key=HMQBZ-XC7KD-WZ64J-PFOQM-CFMT6-HUBOX"></script>
  43. </head>
  44. <!-- 页面载入后,调用init函数 -->
  45. <body>
  46. <!-- 定义地图显示容器 -->
  47. <div id="container"></div>
  48. <div class="searchWrap">
  49. <div class="searchStart">
  50. <div class="input-group mb-3">
  51. <input type="text" autocomplete="off" id="search" class="form-control strtSiteIpt" placeholder="请输入地点"
  52. aria-describedby="basic-addon1">
  53. <div class="input-group-append">
  54. <span class="input-group-text" id="basic-addon1">搜索</span>
  55. </div>
  56. </div>
  57. <ul class="list-group" id="list-group">
  58. <li class="list-group-item"></li>
  59. </ul>
  60. </div>
  61. <div class="searchEndWrap">
  62. <div class="searchEnd">
  63. <div class="input-group mb-3">
  64. <input type="text" autocomplete="off" id="search2" class="form-control strtSiteIpt" placeholder="请输入地点"
  65. aria-describedby="basic-addon2">
  66. <div class="input-group-append">
  67. <span class="input-group-text" id="basic-addon2" style="position: relative;">搜索<button class="close" id="closeBtn"><span aria-hidden="true">&times;</span></button></span>
  68. </div>
  69. </div>
  70. <ul class="list-group" id="list-group2">
  71. <li class="list-group-item"></li>
  72. </ul>
  73. </div>
  74. </div>
  75. <div class="btn-group">
  76. <button type="button" id="pathLineSearch" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  77. 路线
  78. </button>
  79. <!-- <div class="dropdown-menu">
  80. <span data-val="driving" class="pathLineBtn list-group-item active">驾车</span>
  81. <span data-val="walking" class="pathLineBtn list-group-item ">步行</span>
  82. <span data-val="bicycling" class="pathLineBtn list-group-item ">骑行</span>
  83. <span data-val="transit" class="pathLineBtn list-group-item ">公交</span>
  84. </div> -->
  85. </div>
  86. </div>
  87. </body>
  88. <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  89. <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
  90. integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
  91. crossorigin="anonymous"></script>
  92. <script>
  93. $(function () {
  94. //定义地图中心点坐标
  95. var center = new TMap.LatLng(39.984120, 116.307484)
  96. //定义map变量,调用 TMap.Map() 构造函数创建地图
  97. var map = new TMap.Map(document.getElementById('container'), {
  98. center: center,//设置地图中心点坐标
  99. zoom: 4, //设置地图缩放级别
  100. // pitch: 43.5, //设置俯仰角
  101. // rotation: 45 //设置地图旋转角度
  102. });
  103. let markerLayer = new TMap.MultiMarker({
  104. id: 'marker-layer',
  105. map: map
  106. });
  107. function addMarker(latLng, id) {
  108. markerLayer.add({
  109. id: id,
  110. position: latLng
  111. });
  112. var lng = latLng.lng
  113. var lat = latLng.lat
  114. // map.newLatLngZoom(new TMap.LatLng(lng,lat), 14);
  115. }
  116. //移除marker事件
  117. function removeMarker(id) {
  118. if (id) {
  119. markerLayer.remove(id)
  120. }
  121. }
  122. function display_polyline(pl) {
  123. //创建 MultiPolyline显示折线
  124. let polylineLayer = new TMap.MultiPolyline({
  125. id: 'polyline-layer', //图层唯一标识
  126. map: map,//绘制到目标地图
  127. //折线样式定义
  128. styles: {
  129. 'style_blue': new TMap.PolylineStyle({
  130. 'color': '#3777FF', //线填充色
  131. 'width': 8, //折线宽度
  132. 'borderWidth': 5, //边线宽度
  133. 'borderColor': '#FFF', //边线颜色
  134. 'lineCap': 'round', //线端头方式
  135. })
  136. },
  137. //折线数据定义
  138. geometries: [
  139. {
  140. 'id': 'pl_1',//折线唯一标识,删除时使用
  141. 'styleId': 'style_blue',//绑定样式名
  142. 'paths': pl
  143. }
  144. ]
  145. });
  146. }
  147. // 添加路线
  148. function addlineLayer(res) {
  149. var coords = res.result.routes[0].polyline, pl = [];
  150. //坐标解压(返回的点串坐标,通过前向差分进行压缩)
  151. var kr = 1000000;
  152. for (var i = 2; i < coords.length; i++) {
  153. coords[i] = Number(coords[i - 2]) + Number(coords[i]) / kr;
  154. }
  155. //将解压后的坐标放入点串数组pl中
  156. for (var i = 0; i < coords.length; i += 2) {
  157. pl.push(new TMap.LatLng(coords[i], coords[i + 1]));
  158. }
  159. display_polyline(pl)//显示路线
  160. }
  161. let searchStartArr = [] // 开始地点数据
  162. let searchStartVal = null
  163. let searchEndArr = [] // 结束地点数据
  164. let searchEndVal = null
  165. let pathLineWay = 'driving' // 路线默认方式
  166. // 搜索开始点
  167. $('body').on('input', '#search',
  168. function (e) {
  169. var search = $('#search').val()
  170. clearTimeout(window.setTimeOutSearch1)
  171. window.setTimeOutSearch1 = setTimeout(() => {
  172. searchStartArr = []
  173. if (search === "") {
  174. $('#list-group').hide()
  175. } else {
  176. $('#list-group').show()
  177. }
  178. $('#list-group').html(`<li class="list-group-item" id="0">
  179. <span class="lleft">正在努力查找中<span>
  180. <span class="lright"><span>
  181. </li>`)
  182. $.ajax({
  183. type: "get",
  184. url: "https://apis.map.qq.com/ws/place/v1/suggestion",
  185. data: {
  186. 'keyword': search,
  187. 'key': 'HMQBZ-XC7KD-WZ64J-PFOQM-CFMT6-HUBOX',
  188. 'output': 'jsonp'
  189. },
  190. //key换成自己的
  191. dataType: "jsonp",
  192. jsonp: "callback",
  193. jsonpCallback: "TXmap",
  194. headers: {
  195. 'Content-Type': 'application/json'
  196. },
  197. success: function (response) {
  198. if (response.status !== 0) {
  199. console.log('请求失败')
  200. return
  201. }
  202. searchStartArr = response.data
  203. let html = ''
  204. response.data.forEach(item => {
  205. html += `
  206. <li class="list-group-item" id="${item.id}">
  207. <span class="lleft">${item.title}<span>
  208. <span class="lright">${item.address}<span>
  209. </li>
  210. `
  211. });
  212. $('#list-group').html(html)
  213. }
  214. });
  215. }, 200)
  216. }
  217. )
  218. $('.searchStart').on('click', '.list-group-item', function (e) {
  219. if (searchStartVal !== null) {
  220. removeMarker([searchStartVal.id])
  221. }
  222. let target = null
  223. if ($(e.target).attr('class') === "list-group-item") {
  224. target = $(e.target)
  225. } else {
  226. target = $(e.target).parents('.list-group-item')
  227. }
  228. searchStartVal = searchStartArr.find(item => {
  229. return item.id == target.attr('id')
  230. })
  231. $('#search').val(searchStartVal.title)
  232. $('#list-group').hide()
  233. addMarker(searchStartVal.location, searchStartVal.id)
  234. })
  235. $('#basic-addon1').click(function() {
  236. addMarker(searchStartVal.location, searchStartVal.id)
  237. })
  238. // 搜索结束点
  239. $('body').on('input', '#search2',
  240. function (e) {
  241. let search = $('#search2').val()
  242. clearTimeout(window.setTimeOutSearch2)
  243. window.setTimeOutSearch2 = setTimeout(() => {
  244. searchEndArr = []
  245. if (search === "") {
  246. $('#list-group2').hide()
  247. } else {
  248. $('#list-group2').show()
  249. }
  250. $('#list-group2').html(`<li class="list-group-item" id="0">
  251. <span class="lleft">正在努力查找中<span>
  252. <span class="lright"><span>
  253. </li>`)
  254. $.ajax({
  255. type: "get",
  256. url: "https://apis.map.qq.com/ws/place/v1/suggestion",
  257. data: {
  258. 'keyword': search,
  259. 'key': 'HMQBZ-XC7KD-WZ64J-PFOQM-CFMT6-HUBOX',
  260. 'output': 'jsonp'
  261. },
  262. //key换成自己的
  263. dataType: "jsonp",
  264. jsonp: "callback",
  265. jsonpCallback: "TXmap",
  266. headers: {
  267. 'Content-Type': 'application/json'
  268. },
  269. success: function (response) {
  270. if (response.status !== 0) {
  271. console.log('请求失败')
  272. return
  273. }
  274. searchEndArr = response.data
  275. let html = ''
  276. response.data.forEach(item => {
  277. html += `
  278. <li class="list-group-item" id="${item.id}">
  279. <span class="lleft">${item.title}<span>
  280. <span class="lright">${item.address}<span>
  281. </li>
  282. `
  283. });
  284. $('#list-group2').html(html)
  285. }
  286. });
  287. }, 200)
  288. }
  289. )
  290. $('.searchEndWrap').on('click', '.list-group-item', function (e) {
  291. if (searchEndVal !== null) {
  292. removeMarker([searchEndVal.id])
  293. }
  294. let target = null
  295. if ($(e.target).attr('class') === "list-group-item") {
  296. target = $(e.target)
  297. } else {
  298. target = $(e.target).parents('.list-group-item')
  299. }
  300. searchEndVal = searchEndArr.find(item => {
  301. return item.id == target.attr('id')
  302. })
  303. $('#search2').val(searchEndVal.title)
  304. $('#list-group2').hide()
  305. addMarker(searchEndVal.location, searchEndVal.id)
  306. })
  307. $('#basic-addon2').click(function() {
  308. addMarker(searchEndVal.location, searchEndVal.id)
  309. })
  310. // 路径搜索
  311. $('#pathLineSearch').click((e) => {
  312. if($(".searchEnd").is(":hidden")) {
  313. $('.searchEnd').show()
  314. return
  315. }
  316. if (searchStartVal === null) {
  317. alert('请输入结束出发地')
  318. return
  319. }
  320. if (searchEndVal === null) {
  321. alert('请输入结束目的地')
  322. return
  323. }
  324. $.ajax({
  325. type: "get",
  326. url: "https://apis.map.qq.com/ws/direction/v1/" + pathLineWay + "/",
  327. data: {
  328. "from": searchStartVal.location.lat + ',' + searchStartVal.location.lng,
  329. "from_poi": searchStartVal.id,
  330. "to": searchEndVal.location.lat + ',' + searchEndVal.location.lng,
  331. "to_poi": searchEndVal.id,
  332. 'key': 'HMQBZ-XC7KD-WZ64J-PFOQM-CFMT6-HUBOX',
  333. 'output': 'jsonp'
  334. },
  335. //key换成自己的
  336. dataType: "jsonp",
  337. jsonp: "callback",
  338. jsonpCallback: "TXmap",
  339. headers: {
  340. 'Content-Type': 'application/json'
  341. },
  342. success: function (response) {
  343. addlineLayer(response)
  344. }
  345. });
  346. })
  347. $('.pathLineBtn').click(function() {
  348. $('.pathLineBtn').removeClass('active')
  349. $(this).addClass('active')
  350. pathLineWay = $(this).attr('data-val')
  351. })
  352. $('#closeBtn').click(function() {
  353. if (searchEndVal !== null) {
  354. removeMarker([searchEndVal.id])
  355. }
  356. $('.searchEnd').hide()
  357. searchEndArr = []
  358. searchEndVal = null
  359. })
  360. });
  361. </script>
  362. </html>

总结

这里我就抛转引玉下,总体感觉腾讯位置服务上手还是很快的,api还是很完善的,示例的注解也相对完善,注册简便这块我是真的喜欢,毕竟对于程序员来说,最喜欢简单,简单的界面,简洁的代码,都让开发者心情无比舒畅。

感兴趣的小伙伴,或者做自己项目用到地图的小伙伴们赶紧注册用用吧!有问题大家还能一起讨论!

我是阿达,一名喜欢分享知识的程序员,时不时的也会荒腔走板的聊一聊电影、电视剧、音乐、漫画,这里已经有16496位小伙伴在等你们啦,感兴趣的就赶紧来点击关注我把,哪里有不明白或有不同观点的地方欢迎留言!

原文链接:https://blog.csdn.net/jdk_wangtaida/article/details/113105278




所属网站分类: 技术文章 > 博客

作者:我喜欢css

链接:http://www.qianduanheidong.com/blog/article/68/9438eb0a1725377c0a2f/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

5 0
收藏该文
已收藏

评论内容:(最多支持255个字符)