devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

腾讯地图API的应用_腾讯地图api接口文档

作者：小小林熬夜学编程 | 2024-04-27 06:20:37

赞

踩

腾讯地图api接口文档

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

二、具体的demo的代码

效果图：

代码：

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

总结

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

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

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/495233
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号