JQuery+HTML+JavaScript：实现地图位置选取和地址模糊查询

news2024/9/19 19:23:12

本文详细讲解了如何使用 JQuery+HTML+JavaScript 实现移动端页面中的地图位置选取功能。本文逐步展示了如何构建基本的地图页面，如何通过点击地图获取经纬度和地理信息，以及如何实现模糊查询地址并在地图上标注。最后，提供了完整的代码示例，并总结了基于地图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 html
  PUBLIC "-//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.coloradmin.cn/o/1939551.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【proteus经典实战】LCD滚动显示汉字

【proteus经典实战】LCD滚动显示汉字

一、简介 Proteus是一款功能丰富的电子设计和仿真软件&#xff0c;它允许用户设计电路图、进行PCB布局&#xff0c;并在虚拟环境中测试电路功能。这款软件广泛应用于教育和产品原型设计&#xff0c;特别适合于快速原型制作和电路设计教育。Proteus的3D可视化功能使得设计更加直…
阅读更多...
Elasticsearch ILM 热节点迁移至冷节点 IO 打满、影响读写解决方案探讨

Elasticsearch ILM 热节点迁移至冷节点 IO 打满、影响读写解决方案探讨

1、实战问题 ILM&#xff08;索引生命周期管理&#xff09; 遇到热数据迁移至冷节点时造成 IO 打满影响读写的情况。 现在采取的方案是调整索引生命周期策略&#xff0c;定时的将Cold phase 开启/关闭。低峰开启&#xff0c;高峰关闭。 就是不知道这里面会有啥坑。 热节点&…
阅读更多...
C++笔试强训7

C++笔试强训7

文章目录 一、选择题1-5题6-10题 二、编程题题目一题目二 一、选择题 1-5题 基础知识&#xff0c;函数代码少&#xff0c;频繁调用的时候才适合定义内联函数。 故选C。 在C中&#xff0c;inline关键字是用来向编译器建议将函数体在每个调用点“内联展开”的。这意味着编译器会…
阅读更多...
意得辑润色极致优惠方案

意得辑润色极致优惠方案

祝审稿人们编辑们及他们全家工作顺利身体健康万事如意心想事成&#x1f647;&#x1f3fb;&#x1f647;&#x1f3fb;&#x1f647;&#x1f3fb; 好人一生平安&#x1f64f;&#x1f3fb;&#x1f64f;&#x1f3fb;&#x1f64f;&#x1f3fb; #accept
阅读更多...
探索 io_uring：理解高效异步 IO 的工作原理与实现细节

探索 io_uring：理解高效异步 IO 的工作原理与实现细节

概述 io_uring 是一个 Linux 内核提供的高性能异步 I/O 框架&#xff0c;最初在 Linux 5.1 版本中引入。它的设计目标是解决传统的异步 I/O 模型&#xff08;如 epoll 或者 POSIX AIO&#xff09;在大规模 I/O 操作中效率不高的问题。 关键特点和优势包括&#xff1a; 零拷贝…
阅读更多...
驱动框架——CMSIS第一部分 RTE驱动框架介绍

驱动框架——CMSIS第一部分 RTE驱动框架介绍

一、介绍CMISIS 什么是CMSIS&#xff08;cortex microcontrol software interface standard一种软件标准接口&#xff09;&#xff0c;官网地址&#xff1a;https://arm-software.github.io/CMSIS_6/latest/General/index.html 包含的core、driver、RTOS、dsp、nn等部分&…
阅读更多...
【C++】位运算：消失的两个数字

【C++】位运算：消失的两个数字

1.题目 2.算法思路 众所周知&#xff1a;相同的两个数字异或在一起等于0&#xff0c;而异或运算又遵循交换律和结合律。 所以这道题目的思路就有了&#xff1a; 1.可以将数组和1~N中的所有整数全部异或在一起&#xff0c;就可以得到缺失的两个数&#xff08;a,b&#xff09;…
阅读更多...
使用Python创建和扫描二维码

使用Python创建和扫描二维码

二维码&#xff08;Quick Response code&#xff09;已成为在物理和数字领域之间架起桥梁的多功能工具。从分享联系信息和网站链接到促进支付和跟踪库存&#xff0c;二维码在各个行业中找到了应用。通过利用Python的功能&#xff0c;用户可以自动化生成个性化的二维码&#xff…
阅读更多...
基于SpringBoot+Vue的财务管理系统(带1w+文档)

基于SpringBoot+Vue的财务管理系统(带1w+文档)

基于SpringBootVue的财务管理系统(带1w文档) 基于SpringBootVue的财务管理系统(带1w文档) 财务管理系统的开发运用java技术、springboot框架&#xff0c;MIS的总体思想&#xff0c;以及Mysql等技术的支持下共同完成了该系统的开发&#xff0c;实现了财务管理的信息化&#xff0…
阅读更多...
C语言函数：编程世界的魔法钥匙（2）-学习笔记

C语言函数：编程世界的魔法钥匙（2）-学习笔记

引言 注&#xff1a;由于这部分内容比较抽象&#xff0c;而小编我又是一个刚刚进入编程世界的计算机小白&#xff0c;所以我的介绍可能会有点让人啼笑皆非。希望大家多多包涵&#xff01;万分感谢&#xff01;待到小编我学有所成&#xff0c;一定会把这块知识点重新介绍一遍&a…
阅读更多...
VB利用API调用系统的通用颜色对话框

VB利用API调用系统的通用颜色对话框

Option Explicit 在窗体上添加一个Command1按钮控件 Private Type ChooseColor lStructSize As Long hwndOwner As Long hInstance As Long rgbResult As Long lpCustColors As String Flags As Long lCustData As Long lpfnHook As Long lpTemplateName As String End Type 该…
阅读更多...
pcie拓扑结构与层次结构

pcie拓扑结构与层次结构

一 拓扑结构 PCIE 总线与总线共享式通讯方式的 PCI 不同&#xff0c;PCIE 由点到点的链路组成&#xff0c;并采用树形拓扑结构PCIE 拓扑结构体系由 CPU、根复合体&#xff08;RootComplex&#xff0c;RC&#xff09;、端点设备&#xff08;Endpoint&#xff0c;EP&#xff09;…
阅读更多...
Python入门------pycharm加载虚拟环境

Python入门------pycharm加载虚拟环境

pycharm虚拟环境配置&#xff1a; 在按照前面的办法&#xff0c;配置好虚拟环境后,如果我们需要到虚拟环境开发&#xff0c;就需要给编译器配置虚拟环境 1.打开编译器&#xff0c;点击右下角的interpreter选项 2. 点击ADD Interpreter,添加虚拟环境 3. 因为我们使用的是原始…
阅读更多...
【LeetCode】二叉树的最大深度

【LeetCode】二叉树的最大深度

目录 一、题目二、解法完整代码 一、题目 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3 示例 2&#x…
阅读更多...
vue2学习笔记9 - 通过观察vue实例中的data,理解Vue中的数据代理

vue2学习笔记9 - 通过观察vue实例中的data,理解Vue中的数据代理

接着上一节&#xff0c;学一学vue中的数据代理。学vue这几天&#xff0c;最大的感受就是&#xff0c;名词众多&#xff0c;听得发懵。。不过&#xff0c;深入理解之后&#xff0c;其实说得都是一回事。 在Vue中&#xff0c;数据代理是指在实例化Vue对象时&#xff0c;将data对…
阅读更多...
【C++高阶】精通AVL树：全面剖析与深度学习

【C++高阶】精通AVL树：全面剖析与深度学习

目录 &#x1f680; 前言一&#xff1a; &#x1f525; AVL树的性质二&#xff1a; &#x1f525; AVL树节点的定义三&#xff1a; &#x1f525; AVL树的插入四&#xff1a; &#x1f525; AVL树的平衡调整&#xff08;附动图&#xff09; 五&#xff1a;&#x1f525; AVL树的…
阅读更多...
防御保护课-防火墙接口配置实验

防御保护课-防火墙接口配置实验

一、实验拓扑 &#xff08;我做实验用的图如下&#xff09; 二、实验要求 1.防火墙向下使用子接口分别对应生产区和办公区 2.所有分区设备可以ping通网关 三、实验思路 配IP&#xff1b; 划分vlan并配置vlan&#xff1b; 配置路由和安全策略。 四、实验配置 1、画图并…
阅读更多...
C++与lua联合编程

C++与lua联合编程

C与lua联合编程 一、环境配置二、lua基本语法1.第一个lua和C程序2.基本数据类型和变量2.1 Nil2.2 Booleans2.3 Numbers2.4 String(最常用) 3. 字符串处理3.1 错误处理3.2 字符串长度:string.len3.3 字符串子串 :string.sub3.4 字符串查找: string.find3.5字符串替换: string.gs…
阅读更多...
Evil-WinRM一键测试主机安全情况（KALI工具系列四十四）

Evil-WinRM一键测试主机安全情况（KALI工具系列四十四）

目录 1、KALI LINUX 简介 2、Evil-WinRM 3、信息收集 3.1 目标IP 3.2 kali的IP 4、操作步骤 4.1 用户访问 4.2 使用哈希值 4.3 文件处理 5、总结 1、KALI LINUX 简介 Kali Linux 是一个功能强大、多才多艺的 Linux 发行版 &#xff0c;广泛用于网络安全社区。它具有全…
阅读更多...
swiftui使用ScrollView实现左右滑动和上下滑动的效果，仿小红书页面

swiftui使用ScrollView实现左右滑动和上下滑动的效果，仿小红书页面

实现的效果如果所示&#xff0c;顶部的关注用户列表可以左右滑动&#xff0c;中间的内容区域是可以上下滚动的效果&#xff0c;点击顶部的toolbar也可以切换关注/发现/附近不同页面&#xff0c;实现翻页效果。 首页布局 这里使用了NavigationStack组件和tabViewStyle样式配置…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023