前端黑洞网 首页
资源下载

前端电子书

前端视频教程

前端小游戏

前端脚本

前端项目实战

其他资源

博客 问答 程序员的那些事
写博客 注册

程序员最近都爱上了这个网站  程序员们快来瞅瞅吧！  it98k网:it98k.com

本站消息

站长简介/公众号

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


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2023-05(3)

2023-06(4)

腾讯地图JavaScript API的应用

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

总结

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

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

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

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


window属性：controllers

2022年最受欢迎的8大编程语言

为什么都说程序员找不到女朋友，但是身边程序猿的却没一个单身的

30岁以上你还死磕技术，别说拿高薪，可能你连饭碗都会保不住

程序员被开除，老板：“有你参与的项目全黄了！”

笑话：一个测试工程师走进一家酒吧

趣图：程序员头疼的4种原因

笑话：面试官：请拿出一段体现你水平的代码。我： sudo rm -rf /*面试官：这体现了你哪方面能力？

网友说：做开发，不被领导喜欢怎么办？

前端精选：在 WPF 中实现融合效果



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

作者：我喜欢css

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

来源：前端黑洞网

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

5 0
收藏该文
已收藏

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




程序员的那些事(new)

window属性：controllers

2022年最受欢迎的8大编程语言

为什么都说程序员找不到女朋友，但是身边程序猿的却没一个单身的

30岁以上你还死磕技术，别说拿高薪，可能你连饭碗都会保不住

程序员被开除，老板：“有你参与的项目全黄了！”

笑话：一个测试工程师走进一家酒吧

趣图：程序员头疼的4种原因

笑话：面试官：请拿出一段体现你水平的代码。我： sudo rm -rf /*面试官：这体现了你哪方面能力？

网友说：做开发，不被领导喜欢怎么办？

前端精选：在 WPF 中实现融合效果

电子书(new)

CSS3学习必备书籍（CSS3 实战）.pdf

CSS网站布局实录（第二版）.pdf

CSS禅意花园.pdf

HTML5权威指南.pdf

HTML5移动Web开发指南.pdf

零基础学HTML+CSS [第三版].pdf 下载

数据结构与算法 JavaScript 描述.pdf

客户端存储技术.pdf 下载

前端100本高清pdf电子书打包下载

深入理解HTML5：语义、标准与样式 PDF 下载

脚本(new)

压扁小鸟小游戏

.美女拼图游戏源码

JavaScript按键控制坦克移动

JavaScript打地鼠游戏

HTML5实现抓怪物小游戏

网页版-别踩白块游戏

网页版扫雷

HTML5实现拼图游戏

网页版2048

HTML5箭头射击游戏代码

博客(new)

Web 页面之间传递参数的几种方法

uniapp安卓离线打包步骤

Vue--》深入理解 Vue 3 导航守卫，掌握前端路由的灵魂技能！

java图片转二进制流_java将文件转化成二进制流

个人简历html网页代码（使用chatgpt完成web开发课的实验）

【HTTP 协议】掌握 Web 的核心技术

Three.js指定路径漫游（站走切换、路径动画、展示路线、开始、暂停、继续、退出、镜头跟随）

完全卸载vscode

flex布局优化(两端对齐，从左至右)

【熬夜送书 | 第二期】清华社赞助 | 《前端系列丛书》

视频教程(new)

带你快速入坑ES6

0到1快速构建自己的后台管理系统

基于Element-UI二次封装业务组件-前端视频教程

基于WebAR实现3D任务书桌上跳舞

Tensorflow.js 实现垃圾分类

全方位入门git

六个案例学会响应式布局

Ajax实战案例之列表渲染

Phaser从0到1实战微信2D小游戏【钢琴方块】

元旦贺卡-前端视频教程

项目实战(new)

NodeJS+Express+MongoDB实战项目

打造仿小米电商网站

2020版uni-app项目实战

2020前端React项目实战

小程序全栈开发之喵喵交友

Vue实战项目之喵喵电影

实战项目之网易云

实战项目之头条

前端实战项目之幸福西饼

实战项目之拉勾网

问答(new)

居中网站内容 + 垂直导航栏

如何将项目左对齐（标题）

Nunjucks 嵌套变量

文本显示在图像上悬停

HTML/CSS - 按钮在另一个元素下排列

MathJax 库在公式中留下滚动条

如何在MVC5中用Razor将一行设为红色

在 Razor 页面 WebApplication 中将帖子从文本区域保存到数据库

响应式图像背景尺寸封面

将图像放入图像内

游戏(new)

jQuery坦克大战网页小游戏

JS俄罗斯方块游戏代码

Vue.js注意力大考验小游戏代码

HTML欢乐打地鼠小游戏

HTML5糖果消消乐闯关小游戏

扑克牌翻牌记忆小游戏

HTML翻牌小游戏代码

HTML5拉杆子过关小游戏代码

HTML5倾斜迷宫小游戏

HTML5五子棋小游戏

其他资源(new)

jQuery益智拼图游戏

HTML5制作的2048游戏

.小球撞击游戏源码

驴子跳跳网页游戏源码

.jQuery五子棋游戏

HTML5街头霸王游戏源码

.网页版台球小游戏

地图拼图游戏

HTML5中国象棋游戏

Maven+JSP+SSM+Mysql实现的音乐网站