基于百度地图API实现地图位置选取的移动端页面开发教程 (JQuery+Html+JavaScript+CSS)

本文详细讲解了如何使用百度地图API实现移动端页面中的地图位置选取功能。文章首先介绍了百度地图API的2.0和3.0版本功能，并重点采用3.0 API。接着，逐步展示了如何构建基本的地图页面，如何通过点击地图获取经纬度和地理信息，以及如何实现模糊查询地址并在地图上标注。最后，提供了完整的代码示例，并总结了基于百度地图API进行地图位置选点的开发过程，帮助开发者快速上手并应用到实际项目中。

一、百度地图API介绍

百度地图API为开发者提供了强大的地理信息服务，可以轻松实现地图显示、位置选取、路线规划等功能。这里主要介绍2.0版本和3.0版本的功能示例，以及路书的介绍。

2.0 API

2.0版本的API功能相对较少，主要用于简单的地图展示和位置标注，以下是一个基本的示例：

var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);

3.0 API

3.0版本增加了更多的功能和优化，提升了地图加载速度和交互体验，以下是一个展示地图和标注的示例：

var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point);
map.addOverlay(marker);

百度路书

路书是百度地图API提供的一种记录和展示路线的功能，可以用来展示旅游路线、出行规划等，以下是一个基本示例：

var driving = new BMap.DrivingRoute(map, {renderOptions: { map: map, autoViewport: true }
});
driving.search("起点", "终点");

本文将采用百度地图3.0 API来实现地图位置选点的功能，包括地图展示、点击地图选点、地理信息转经纬度、位置的模糊查询等。

二、初始化地图页面

首先，创建一个基本的HTML页面，并引入百度地图API：

<!DOCTYPE html>
<html>
<head><title>点击地图获取地址和经纬度</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak=你的AK&s=1"></script><style>body, html {margin: 0;padding: 0;height: 100%;overflow: hidden;}.main-div {position: relative;height: 100%;display: flex;flex-direction: column;}form {background: #f8f8f8;padding: 5px;}.input-group {display: flex;align-items: center;margin-bottom: 5px;}label {flex: 0 0 60px;margin-right: 15px;white-space: nowrap;}input[type="text"] {flex: 1;padding: 10px;box-sizing: border-box;}#allmap {width: 100%;height: 100%;position: absolute;top: 0px;}</style>
</head>
<body><div class="main-div"><div id="allmap"></div></div>
</body>
<script>var map = new BMap.Map("allmap");var point = new BMap.Point(116.404, 39.915);map.centerAndZoom(point, 15);
</script>
</html>

实现效果：

在这里插入图片描述

三、增加地理信息模态框

在页面上方添加一个表单，用于显示和输入经纬度和地理信息：

<form><div class="input-group"><label for="lng">经度</label><input type="text" name="lng" id="lng" value="" readonly /></div><div class="input-group"><label for="lat">纬度</label><input type="text" name="lat" id="lat" value="" readonly /></div><div class="input-group"><label for="address">地址</label><input type="text" name="address" id="address" /></div>
</form>

将这段表单代码加入到 main-div 里。

同时，我们需要将地图向下移动240px，给模态框留出空间，字体修改为40px，适应手机端页面。

修改及新增的CSS如下（没有修改的样式继续保留）：

  <style>label {flex: 0 0 60px;margin-right: 15px;white-space: nowrap;font-size: 40px;}input[type="text"] {flex: 1;padding: 10px;box-sizing: border-box;font-size: 40px;}#allmap {width: 100%;height: 100%;position: absolute;top: 240px;}.tangram-suggestion table {width: 100% !important;font-size: 32px !important;line-height: 50px !important;cursor: default !important;}.tangram-suggestion table tr td{line-height: 40px !important;height: 60px !important;}</style>

实现效果如图：

在这里插入图片描述

目前我们的表单还只是一个静态的，下面我们来实现给表单的动态赋值。

四、实现地图点击事件

下面，我们为地图添加点击事件，获取点击位置的经纬度，并通过 Geocoder 获取地理信息，将获取的经纬度填充到上方表单。

JavaScript 里添加如下代码：

map.addEventListener("click", function(e) {document.getElementById('lng').value = e.point.lng;document.getElementById('lat').value = e.point.lat;var geoc = new BMap.Geocoder();geoc.getLocation(e.point, function(rs) {var addComp = rs.addressComponents;document.getElementById('address').value = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;});
});

实现效果如图：

在这里插入图片描述

点击地图上位置时，会触发点击事件，自动为上方表单动态赋值经纬度。

接着，我们优化代码，打开页面时自动定位到我们的位置，并实现点击事件时经纬度、地址的填充。

JavaScript 内容全部替换为：

  var map = new BMap.Map("allmap");var geoc = new BMap.Geocoder();  //地址解析对象var markersArray = [];var geolocation = new BMap.Geolocation();var point = new BMap.Point(116.331398, 39.897445);map.centerAndZoom(point, 32); // 中心点geolocation.getCurrentPosition(function (r) {if (this.getStatus() == BMAP_STATUS_SUCCESS) {var mk = new BMap.Marker(r.point);map.addOverlay(mk);map.panTo(r.point);map.enableScrollWheelZoom(true);}else {alert('failed' + this.getStatus());}}, { enableHighAccuracy: true })map.addEventListener("click", showInfo);//清除标识function clearOverlays() {if (markersArray) {for (i in markersArray) {map.removeOverlay(markersArray[i])}}}//地图上标注function addMarker(point) {var marker = new BMap.Marker(point);markersArray.push(marker);clearOverlays();map.addOverlay(marker);}//点击地图事件处理function showInfo(e) {document.getElementById('lng').value = e.point.lng;document.getElementById('lat').value = e.point.lat;geoc.getLocation(e.point, function (rs) {var addComp = rs.addressComponents;var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;document.getElementById('sever_add').value = address;});map.clearOverlays();addMarker(e.point);}

实现效果如下：

在这里插入图片描述

至此，地图选取位置获得经纬度和地址信息的功能已经完成。

下面，我们来实现输入模糊地址来反向定位地图中的坐标，并获得精确的位置经纬度。

五、输入模糊地址定位地图坐标

通过Autocomplete实现地址模糊查询，并在选定地址后在地图上标注位置。

首先，我们给地址输入框的输入进行校验，增加JavaScript代码：

function validate() {var sever_add = document.getElementsByName('sever_add')[0].value;if (isNull(sever_add)) {alert('请选择地址');return false;}return true;}//判断是否是空function isNull(a) {return (a == '' || typeof (a) == 'undefined' || a == null) ? true : false;}
}

接着，增加输入后的下列框事件和下拉框点击事件：

var ac = new BMap.Autocomplete(    //建立一个自动完成的对象{"input": "sever_add", "location": map});ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件var str = "";var _value = e.fromitem.value;var value = "";if (e.fromitem.index > -1) {value = _value.province + _value.city + _value.district + _value.street + _value.business;}str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;value = "";if (e.toitem.index > -1) {_value = e.toitem.value;value = _value.province + _value.city + _value.district + _value.street + _value.business;}str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;});var myValue;ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件var _value = e.item.value;myValue = _value.province + _value.city + _value.district + _value.street + _value.business;setPlace();});function setPlace() {map.clearOverlays();    //清除地图上所有覆盖物function myFun() {var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果map.centerAndZoom(pp, 32);map.addOverlay(new BMap.Marker(pp));    //添加标注document.getElementById('lng').value = pp.lng;document.getElementById('lat').value = pp.lat;}var local = new BMap.LocalSearch(map, { //智能搜索onSearchComplete: myFun});local.search(myValue);}

实现效果如下：

输入 “云龙湖”，会显示模糊查询到的地点。
在这里插入图片描述

选择地点，地图自动跳转到目标地点为中心的界面，显示目标点标注，并返回经纬度、详细地址给上方表单。

在这里插入图片描述

至此，输入模糊地址定位地图坐标的功能已经实现。

六、页面全部源码

下面是本文页面的全部代码，为了方便测试，已经把 JavaScript 和 CSS 与 Html 写在一个页面内。

完整的源码如下：

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>点击地图获取地址和经纬度map，address，lng，lat</title><meta name="robots" content="noindex, nofollow"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript"src="https://api.map.baidu.com/getscript?v=3.0&ak=你的ak&s=1"></script><style>body,html {margin: 0;padding: 0;height: 100%;overflow: hidden;}.main-div {position: relative;height: 100%;display: flex;flex-direction: column;}form {background: #f8f8f8;padding: 5px;}.input-group {display: flex;align-items: center;margin-bottom: 5px;}label {flex: 0 0 60px;margin-right: 15px;white-space: nowrap;font-size: 40px;}input[type="text"] {flex: 1;padding: 10px;box-sizing: border-box;font-size: 40px;}#allmap {width: 100%;height: 100%;position: absolute;top: 240px;}.tangram-suggestion table {width: 100% !important;font-size: 32px !important;line-height: 50px !important;cursor: default !important;}.tangram-suggestion table tr td{line-height: 40px !important;height: 60px !important;}</style>
</head><body><div class="main-div"><form method="post" action="" name="theForm" enctype="multipart/form-data" onsubmit="return validate()"><div class="input-group"><label for="lng">经度</label><input type="text" name="lng" id="lng" value="" readonly/></div><div class="input-group"><label for="lat">纬度</label><input type="text" name="lat" id="lat" value="" readonly/></div><div class="input-group"><label for="sever_add">地址</label><input type="text" name="sever_add" id="sever_add" value="" /></div></form><div id='allmap'></div></div>
</body><script type="text/javascript">function validate() {var sever_add = document.getElementsByName('sever_add')[0].value;if (isNull(sever_add)) {alert('请选择地址');return false;}return true;}//判断是否是空function isNull(a) {return (a == '' || typeof (a) == 'undefined' || a == null) ? true : false;}var map = new BMap.Map("allmap");var geoc = new BMap.Geocoder();  //地址解析对象var markersArray = [];var geolocation = new BMap.Geolocation();var point = new BMap.Point(116.331398, 39.897445);map.centerAndZoom(point, 32); // 中心点geolocation.getCurrentPosition(function (r) {if (this.getStatus() == BMAP_STATUS_SUCCESS) {var mk = new BMap.Marker(r.point);map.addOverlay(mk);map.panTo(r.point);map.enableScrollWheelZoom(true);}else {alert('failed' + this.getStatus());}}, { enableHighAccuracy: true })map.addEventListener("click", showInfo);//清除标识function clearOverlays() {if (markersArray) {for (i in markersArray) {map.removeOverlay(markersArray[i])}}}//地图上标注function addMarker(point) {var marker = new BMap.Marker(point);markersArray.push(marker);clearOverlays();map.addOverlay(marker);}//点击地图事件处理function showInfo(e) {document.getElementById('lng').value = e.point.lng;document.getElementById('lat').value = e.point.lat;geoc.getLocation(e.point, function (rs) {var addComp = rs.addressComponents;var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;document.getElementById('sever_add').value = address;});map.clearOverlays();addMarker(e.point);}var ac = new BMap.Autocomplete(    //建立一个自动完成的对象{"input": "sever_add", "location": map});ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件var str = "";var _value = e.fromitem.value;var value = "";if (e.fromitem.index > -1) {value = _value.province + _value.city + _value.district + _value.street + _value.business;}str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;value = "";if (e.toitem.index > -1) {_value = e.toitem.value;value = _value.province + _value.city + _value.district + _value.street + _value.business;}str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;});var myValue;ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件var _value = e.item.value;myValue = _value.province + _value.city + _value.district + _value.street + _value.business;setPlace();});function setPlace() {map.clearOverlays();    //清除地图上所有覆盖物function myFun() {var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果map.centerAndZoom(pp, 32);map.addOverlay(new BMap.Marker(pp));    //添加标注document.getElementById('lng').value = pp.lng;document.getElementById('lat').value = pp.lat;}var local = new BMap.LocalSearch(map, { //智能搜索onSearchComplete: myFun});local.search(myValue);}
</script></html>

七、可视化地图上位置选取功能总结

通过百度地图API，我们可以方便地实现地图位置选点的功能，提升用户体验。在本文中，我们介绍了如何构建基本的地图页面，如何实现点击地图获取经纬度和地理信息，以及通过模糊查询来标注地图位置。希望这篇教程能够帮助你快速上手百度地图API，并应用到实际项目中。

当然，地图的API还有很多，下面整理了一份目前市面上常用地图API对比，希望对你有所帮助。

地图API提供商主要功能优点缺点
百度地图API百度地图展示、位置选取、路线规划、地理编码、逆地理编码、POI搜索覆盖中国范围广，中文支持好，提供详细的中国本地数据国际覆盖范围有限
谷歌地图APIGoogle地图展示、位置选取、路线规划、地理编码、逆地理编码、街景服务国际覆盖范围广，数据更新及时，街景服务优秀国内使用受限
高德地图API阿里巴巴地图展示、位置选取、路线规划、地理编码、逆地理编码、POI搜索中国本地数据详细，支持多种出行方式国际覆盖范围有限
腾讯地图API腾讯地图展示、位置选取、路线规划、地理编码、逆地理编码、POI搜索提供丰富的中国本地数据，接口简单易用国际覆盖范围有限
OpenStreetMap APIOpenStreetMap地图展示、位置选取、路线规划、地理编码、逆地理编码免费且开源，数据覆盖全球，社区支持强数据精度和更新频率可能不及商业地图API

这些API各有特点，开发者可以根据项目需求选择合适的地图API。百度地图、高德地图和腾讯地图在中国本地服务方面具有优势，而谷歌地图和OpenStreetMap在国际覆盖范围方面表现较好。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/380592.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

uniapp vue3 上传视频组件封装

uniapp vue3 上传视频组件封装

首先创建一个 components 文件在里面进行组件的创建 下面是 vvideo组件的封装 也就是图片上传组件 只是我的命名是随便起的 <template><!-- 上传视频 --><view class"up-page"><!--视频--><view class"show-box" v-for"…
阅读更多...
【Android面试八股文】荣耀面试算法题：输入一个N阶方阵(0＜N＜10),输出此方阵顺时针旋转M(0＜=M＜=10000)次后的方阵

【Android面试八股文】荣耀面试算法题：输入一个N阶方阵(0＜N＜10),输出此方阵顺时针旋转M(0＜=M＜=10000)次后的方阵

文章目录 1. 算法题：输入一个N阶方阵(0<N<10),输出此方阵顺时针旋转M(0<=M<=10000)次后的方阵1.1 题目描述1.2 算法实现1.2.1 步骤说明：1.2.2 算法实现1.2.3 代码实现：1.2.4 程序说明：1.2.5 示例详细讲解如何将一个矩阵顺时针旋转90度1. 算法题：输入一个N阶方…
阅读更多...
达梦数据库DM8-索引篇

达梦数据库DM8-索引篇

目录 一、前景二、名词三、语法1、命令方式创建索引1.1 创建索引空间1.2.1 创建普通索引并指定索引数据空间1.2.2 另一种没验证&#xff0c;官方写法1.3 复合索引1.4 唯一索引1.5 位图索引1.6 函数索引 2、创建表时候创建索引3、可视化方式创建索引3.1 打开DM管理工具3.2 找到要…
阅读更多...
生成式人工智能落地校园与课堂的15个场景

生成式人工智能落地校园与课堂的15个场景

生成式人工智能正在重塑教育行业&#xff0c;为传统教学模式带来了革命性的变化。随着AI的不断演进&#xff0c;更多令人兴奋的应用场景将逐一显现&#xff0c;为学生提供更加丰富和多元的学习体验。 尽管AI在教学中的应用越来越广泛&#xff0c;但教师们也不必担心会被完全替代…
阅读更多...
[电机控制]-三相鼠笼电机simulink建模

[电机控制]-三相鼠笼电机simulink建模

三相鼠笼电机simulink建模 1 方程 电机方程&#xff1a; d i s α d t K 1 i s α K 2 ϕ r α K 3 ω r ϕ r β K 4 v s α \frac{di_{s\alpha}}{dt}K_{1}i_{s\alpha}K_{2}\phi_{r\alpha}K_{3}\omega_{r}\phi_{r\beta}K_{4}v_{s\alpha} dtdisα​​K1​isα​K2​ϕrα…
阅读更多...
VSCODE 下 openocd Jlink 的配置笔记

VSCODE 下 openocd Jlink 的配置笔记

title: VSCODE 下 openocd Jlink 的配置笔记 tags: STM32HalCubemax 文章目录 内容VSCODE 下 openocd Jlink 的配置笔记安装完成后修改jlink的配置文件然后修改你的下载器为jlink烧录你的项目绝对会出现下面的问题那么打开下载的第一个软件 &#xff08;点到这个jlink右键&…
阅读更多...
视频分帧【截取图片】（YOLO目标检测【生成数据集】）

视频分帧【截取图片】（YOLO目标检测【生成数据集】）

高效率制作数据集【按这个流程走&#xff0c;速度很顶】 本次制作&#xff0c;1059张图片【马路上流动车辆】 几乎就是全自动了&#xff0c;只要视频拍得好&#xff0c;YOLO辅助制作数据集就效率极高 视频中的图片抽取&#xff1a; 【由于视频内存过大&#xff0c;遇到报错执行…
阅读更多...
IO半虚拟化-vhost学习笔记

IO半虚拟化-vhost学习笔记

参考&#xff1a;系《深入浅出dpdk》学习笔记以及redhat的官方博客 vhost属于virtio-net网络设备的后端驱动&#xff0c;经历了从virtio-net后端&#xff0c;到内核态vhost-net&#xff0c;到vhost-user的演进过程。先过一下背景知识&#xff0c; 背景知识 QEMU QEMU 是一个…
阅读更多...
几种常用排序算法

几种常用排序算法

1 基本概念 排序是处理数据的一种最常见的操作&#xff0c;所谓排序就是将数据按某字段规律排列&#xff0c;所谓的字段就是数据节点的其中一个属性。比如一个班级的学生&#xff0c;其字段就有学号、姓名、班级、分数等等&#xff0c;我们既可以针对学号排序&#xff0c;也可…
阅读更多...
huawei USG6001v1学习---防火墙高可靠性（双机热备）

huawei USG6001v1学习---防火墙高可靠性（双机热备）

1.什么是双机热备 如图&#xff1a;当左图的防火墙发生故障时&#xff0c;整个系统都会收到影响&#xff0c;而右图即使有防火墙发生故障&#xff0c;但是还有一台防火墙做备份&#xff0c;相对于只有一台防火墙&#xff0c;要可靠些。 由于防火墙上不仅需要同步配置信息&…
阅读更多...
【Linux】—— 进程的基本概念、PCB、fork

【Linux】—— 进程的基本概念、PCB、fork

&#x1f30f;博客主页&#xff1a;PH_modest的博客主页 &#x1f6a9;当前专栏&#xff1a;Linux跬步积累 &#x1f48c;其他专栏&#xff1a; &#x1f534; 每日一题 &#x1f7e1; C跬步积累 &#x1f7e2; C语言跬步积累 &#x1f308;座右铭&#xff1a;广积粮&#xff0…
阅读更多...
【海外云手机】静态住宅IP集成解决方案

【海外云手机】静态住宅IP集成解决方案

航海大背景下&#xff0c;企业和个人用户对于网络隐私、稳定性以及跨国业务的需求日益增加。静态住宅IP与海外云手机的结合&#xff0c;提供了一种创新的集成解决方案&#xff0c;能够有效应对这些需求。 本篇文章分为三个部分&#xff1b;静态住宅优势、云手机优势、集成解决…
阅读更多...
Spring框架、03SpringMVC

Spring框架、03SpringMVC

SpringMVC SpringMVC入门 介绍 SpringMVC将Servlet一些通用功能进行了抽取和封装&#xff0c;使用它之后&#xff0c;代码主要有两部分组成&#xff1a; 前端控制器&#xff1a;由SpringMVC提供&#xff0c;主要负责接收参数和返回数据 处理器&#xff1a;由程序员编写&…
阅读更多...
好用的接口文档swagger

好用的接口文档swagger

本篇文章记录怎么给我们的后端项目整一个好用的接口文档 这个东西好像叫什么swagger吧 1. 依赖引入&#xff1a; <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spring-boot-starter</artifactId></dependency>…
阅读更多...
AWE2025正式启动，AWE×AI 推动智慧生活的普及

AWE2025正式启动，AWE×AI 推动智慧生活的普及

7月18日&#xff0c;2025年中国家电及消费电子博览会&#xff08;AWE2025&#xff09;正式启动。主办方宣布&#xff0c;AWE2025的主题为“AI科技、AI生活”&#xff0c;展会将于2025年3月20-23日在上海新国际博览中心举办。 作为全球三大家电和消费电子领域展会之一&#xff…
阅读更多...
图书馆定位导航：RFID、VR与AR技术在图书馆中的应用

图书馆定位导航：RFID、VR与AR技术在图书馆中的应用

图书馆作为知识的宝库&#xff0c;承载着无数求知者的梦想与期待&#xff0c;随着馆藏书籍数量的激增与图书馆布局的日益复杂&#xff0c;读者在寻找目标书籍往往有许多困难。传统的索引号查询方式虽能提供书籍的基本信息&#xff0c;但在寻找过程中&#xff0c;因不熟悉图书馆…
阅读更多...
各种复现，保证质量

各种复现，保证质量

代码复现&#xff0c;文献复现&#xff0c;模型复现&#xff0c;算法复现&#xff0c;文章复现&#xff0c;创新点等等&#xff0c;python/matlab/c语言/r语言均可&#xff0c;保证高质量完成&#xff0c;可接急单&#xff0c;不成功不收费&#xff01;
阅读更多...
Apache Bigtop 正式支持 openEuler，共创大数据新生态

Apache Bigtop 正式支持 openEuler，共创大数据新生态

近日&#xff0c;在OpenAtom openEuler&#xff08;简称"openEuler"&#xff09;BigData SIG与Linaro的携手努力下&#xff0c;** Apache Bigtop于2024年7月8日发布的3.3.0新版本中&#xff0c;正式宣告了对openEuler操作系统的原生支持**。这一里程碑式的进展&#…
阅读更多...
人话讲下如何用github actions编译flutter应用-以编译windows为例

人话讲下如何用github actions编译flutter应用-以编译windows为例

actions的脚本看下这个&#xff0c;有简单的说明&#xff0c;有关于编译个平台的脚本&#xff1a; https://github.com/marketplace/actions/flutter-action 打开你要编译的项目点击那个Actions按钮 然后随便点击一个脚本会跳到白框编辑界面 打开上文提到的网址随便抄下就ok …
阅读更多...
前端-04-VScode敲击键盘有键入音效，怎么关闭

前端-04-VScode敲击键盘有键入音效，怎么关闭

目录 问题解决办法 问题 今天正在VScode敲项目&#xff0c;不知道是按了什么快捷键还是什么的&#xff0c;敲击键盘有声音&#xff0c;超级烦人啊&#xff01;&#xff01;于是我上网查了一下&#xff0c;应该是开启了VScode的键入音效&#xff0c;下面是关闭键入音效的办法。…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023