当前位置：首页 > article >正文

vue3 vite或者vue2 百度地图(卫星图)离线使用详细讲解

article 2026/3/17 23:05:46

1、在Windows上下载瓦片，使用的工具为: 全能电子地图下载器3.0最新版（推荐）

下载后解压，然后进入目录"全能电子地图下载器3.0最新版（推荐）\全能电子地图下载器3.0\MapTileDownloader" 在这个目录下双击imaps.exe可打开如下界面

在这里插入图片描述

下载完成后会弹出个框，选择否即可

在这里插入图片描述
进入C:\MapDownload\baidumaps\图片类型\下可以查看到自己所下载的不同类型的瓦片(这里是卫星图的瓦片)

然后安装一个全局serve，打开终端并输入npm install -g serve 安装完成后，进入到C:\MapDownload\baidumaps(如果修改瓦片保存路径了，则找到相应位置)然后执行serve并回车，如下所示表示成功

在这里插入图片描述

接下来创建vue3项目：npm create vue，回车并输入名字：vue3_baidu_map_offline，其他一律回车，然后进入项目，并安装所需要的包使使用命令 cnpm i 或者npm i，安装完成后下载百度地图离线工具：

链接: https://pan.baidu.com/s/1_TqfUtVAElsrxB1J3hW-EA 提取码: vw5e

下载并解压将static目录及其子内容全部复制到src/assets目录下，结构如下：

在这里插入图片描述

修改App.vue的样式：将main.js中的import ‘./assets/main.css’ 注释掉或者删除了。然后查看你下载的瓦片图的后缀类型，比如这里的jpg

在这里插入图片描述

打开map_load.js做响应的路径及格式修改，比如对tiles_dir的修改，如果你的瓦片保存的为"C:\MapDownload\baidumaps\satellite\10\203" 就将这里边的satellite赋值给tiles_dir

在这里插入图片描述

map_load.js中的内容如下：

let bmapcfg = {// 瓦片图的后缀-修改成你的// imgext: '.png',imgext: '.jpg',// 瓦片图的地址，基地址路径（默认名字）// tiles_dir: '/roadmap',tiles_dir: '/satellite',  // 修改成你的// 瓦片图地址-尽量使用127或者localhost-方便断网测试tiles_path: 'http://127.0.0.1:3000/',// 卫星瓦片图的地址-可为空tiles_hybrid: '',//自定义图层的地址-可为空tiles_self: ''
}// 下面可以保持不动
var scripts = document.getElementsByTagName('script')
var JS__FILE__ = scripts[scripts.length - 1].getAttribute('src') //获得当前js文件路径
bmapcfg.home = JS__FILE__.substr(0, JS__FILE__.lastIndexOf('/') + 1) //地图API主目录
;(function () {window.BMap_loadScriptTime = new Date().getTime()//加载地图API主文件document.write('<script type="text/javascript" src="' +bmapcfg.home +'bmap_offline_api_v3.0_min.js"></script>')
})()

在vue项目的index.html中引入static中的三个静态文件，index.html中的内容如下：

<!DOCTYPE html>
<html lang=""><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title><!--下边这三个script标签 引入的路径要写对--><scripttype="text/javascript"src="/src/assets/static/map_load.js"></script><scripttype="text/javascript"src="/src/assets/static/TextIconOverlay_min.js"></script><scripttype="text/javascript"src="/src/assets/static//MarkerClusterer_min.js"></script></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

App.vue中的内容如下，内包含如何离线使用百度地图api文档：

<template><div id="container"></div>
</template>
<script setup>
import {onMounted, ref} from "vue";
const map = ref()
const mk = ref()
let BMap = window.BMap
let initMap = () => {// 创建地图必须要给container设置宽高map.value = new BMap.Map('container')// 创建点坐标let Point = new BMap.Point(121.248292,25.081786)// 在地图上添加Markermap.value.addOverlay(new BMap.Marker(new BMap.Point(121.243473,25.079847)))map.value.addOverlay(new BMap.Marker(new BMap.Point(121.243073,25.083847)))// 设置地图中心点，并且中心点放大级别为16级map.value.centerAndZoom(Point, 16)// 设置地图最小能缩放到11级map.value.setMinZoom(11)// 最大16级，这个看你下载的瓦片级数，和瓦片上的数字对应map.value.setMaxZoom(16)//可以让鼠标滚轮放大缩小map.value.enableScrollWheelZoom(true)// 添加控制器map.value.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT,type: BMAP_NAVIGATION_CONTROL_SMALL}))// 此Marker可以拖拽mk.value = new BMap.Marker(Point, { enableDragging: true })map.value.addOverlay(mk.value)// 拖拽点标注事件mk.value.addEventListener('dragend', (e)=> {console.log('执行点位拖拽', e)getAddrByPoint(e.point)})// 地图标注点击事件map.value.addEventListener('click', (e)=> {console.log('点击事件', e)// 清空点标注map.value.clearOverlays()// 点标注map.value.addOverlay(new BMap.Marker(e.point, { enableDragging: true }))let circle = new BMap.Circle(e.point,500,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建圆map.value.addOverlay(circle)console.log('e.point', e.point);console.log('e.point.lat', e.point.lat);let random = (Math.random()-0.5)/100map.value.addOverlay(new BMap.Marker(new BMap.Point(e.point.lng+random,e.point.lat+random),{ enableDragging: true }))// that.map.addOverlay(new BMap.Marker(new BMap.Point(e.point.lat,e.point.lng+0.001),{ enableDragging: true }))// 设置地图中心点map.value.panTo(e.point)getAddrByPoint(e.point)})// 从百度地图上复制的信息窗口内容(未改动的)// var opts = {//   width : 200,     // 信息窗口宽度//   height: 100,     // 信息窗口高度//   title : "故宫博物院" , // 信息窗口标题//   message:"这里是故宫"// }// var infoWindow = new BMapGL.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象// marker.addEventListener("click", function(){//   map.openInfoWindow(infoWindow, point); //开启信息窗口// });// 下边这个是改成符合离线状态且符合vue3格式的信息窗口，点击地图上Point这个点即可显示信息窗口// let opts = {//   width : 200,     // 信息窗口宽度//   height: 100,     // 信息窗口高度//   title : "故宫博物院" , // 信息窗口标题//   message:"这里是故宫"// }// let infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象// mk.value.addEventListener("click", function(){//   map.value.openInfoWindow(infoWindow, Point); //开启信息窗口// });/* 总结通过对比可以发现主要修改的地方为new BMapGL.InfoWindow改成了new BMap.InfoWindow、marker.addEventListener改成了mk.value.addEventListener、map.openInfoWindow改成了map.value.openInfoWindow */}
// 逆地址解析数据暂时做不了
const getAddrByPoint = (Point)=> {let BMap = window.BMapconsole.log('new BMap.Geocoder()', new BMap.Geocoder())// 这个api是不执行的-因为逆地址解析是需要调用地图api的-只有在public/index.html正常引入百度地图时才会生效let geoc = new BMap.Geocoder()geoc.getLocation(Point, rs => {console.log('点击地址-获取信息', rs)})console.log('执行解析完毕')
}
onMounted(()=>{initMap()})</script>
<!--vue2写法--><!--<script>-->
<!--export default {-->
<!--  name: 'HelloWorld',-->
<!--  data () {-->
<!--    return {-->
<!--      // 地图实例-->
<!--      map: null,-->
<!--      // 点实例-->
<!--      mk: null-->
<!--    }-->
<!--  },-->
<!--  created () {-->
<!--    // 加载地图-->
<!--    this.$nextTick(() => {-->
<!--      this.initMap()-->
<!--    })-->
<!--  },-->
<!--  methods: {-->
<!--    // 获取地图-->
<!--    initMap () {-->
<!--      // 内网使用-地图对象-在public/index.html引入文件-->
<!--      let BMap = window.BMap-->
<!--      console.log('window.BMap', window.BMap)-->
<!--      // this指向-->
<!--      const that = this-->
<!--      // 创建Map实例-->
<!--      this.map = new BMap.Map('container')-->
<!--      // 地图中心点-经纬度决定我们加载哪里的地图-->
<!--      var Point = new BMap.Point(121.24451,25.082817)-->
<!--      that.map.addOverlay(new BMap.Marker(new BMap.Point(121.243473,25.079847)))-->
<!--      that.map.addOverlay(new BMap.Marker(new BMap.Point(121.243073,25.083847)))-->
<!--      // 初始化地图中心点和放大级别-->
<!--      this.map.centerAndZoom(Point, 17)-->
<!--      // 限制地图放大等级-为什么限制-->
<!--      // 1.因为内网时我们访问不到公网百度地图数据资源-->
<!--      // 2.同时这里地图放大等级也对应着我们下载的瓦片图资源-->
<!--      this.map.setMinZoom(11)-->
<!--      this.map.setMaxZoom(17)-->
<!--      //开启鼠标滚轮缩放-->
<!--      this.map.enableScrollWheelZoom(true)-->
<!--      // 4、添加（右上角）平移缩放控件-->
<!--      this.map.addControl(-->
<!--          new BMap.NavigationControl({-->
<!--            anchor: BMAP_ANCHOR_TOP_RIGHT,-->
<!--            type: BMAP_NAVIGATION_CONTROL_SMALL-->
<!--          })-->
<!--      )-->
<!--      // 添加中心标注点-->
<!--      this.mk = new BMap.Marker(Point, { enableDragging: true })-->
<!--      this.map.addOverlay(this.mk)-->
<!--      // 拖拽点标注事件-->
<!--      this.mk.addEventListener('dragend', function (e) {-->
<!--        console.log('执行点位拖拽', e)-->
<!--        that.getAddrByPoint(e.point)-->
<!--      })-->
<!--      // 地图标注点击事件-->
<!--      this.map.addEventListener('click', function (e) {-->
<!--        console.log('点击事件', e)-->
<!--        // 清空点标注-->
<!--        that.map.clearOverlays()-->
<!--        // 点标注-->
<!--        that.map.addOverlay(new BMap.Marker(e.point, { enableDragging: true }))-->
<!--        var circle = new BMap.Circle(e.point,500,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建圆-->
<!--        that.map.addOverlay(circle)-->
<!--        console.log('e.point', e.point);-->
<!--        console.log('e.point.lat', e.point.lat);-->
<!--        let random = (Math.random()-0.5)/100-->
<!--        that.map.addOverlay(new BMap.Marker(new BMap.Point(e.point.lng+random,e.point.lat+random)))-->
<!--        // that.map.addOverlay(new BMap.Marker(new BMap.Point(e.point.lat,e.point.lng+0.001),{ enableDragging: true }))--><!--        // 设置地图中心点-->
<!--        that.map.panTo(e.point)-->
<!--        that.getAddrByPoint(e.point)-->
<!--      })-->
<!--    },-->
<!--    // 逆地址解析数据-->
<!--    getAddrByPoint (Point) {-->
<!--      // 百度地图的原装api-->
<!--//       var map = new BMapGL.Map("container");-->
<!--//       map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);-->
<!--// // 创建地理编码实例-->
<!--//       var myGeo = new BMapGL.Geocoder();-->
<!--// // 根据坐标得到地址描述-->
<!--//       myGeo.getLocation(new BMapGL.Point(116.364, 39.993), function(result){-->
<!--//         if (result){-->
<!--//           alert(result.address);-->
<!--//         }-->
<!--//       });--><!--      //百度地图改装后的api--><!--      // console.log("逆地址解析")-->
<!--      // this.map.centerAndZoom(Point, 11);-->
<!--      // // 创建地理编码实例-->
<!--      // let BMap = window.BMap-->
<!--      // console.log("BMap", BMap)-->
<!--      // var myGeo = new BMap.Geocoder();-->
<!--      // console.log(myGeo)-->
<!--      // // 根据坐标得到地址描述-->
<!--      // myGeo.getLocation(Point, function(result){-->
<!--      //   console.log("result", result)-->
<!--      //   if (result){-->
<!--      //     alert(result.address);-->
<!--      //   }-->
<!--      // });--><!--      // 本项目原先的api-->
<!--      // 从这里可以看出来：将百度地图原先api中的new BMapGL换成window.BMap，其他都不变，-->
<!--      console.log('执行解析', Point)-->
<!--      // 内网使用-地图对象-在public/index.html引入文件-->
<!--      let BMap = window.BMap-->
<!--      console.log('new BMap.Geocoder()', new BMap.Geocoder())-->
<!--      // 这个api是不执行的-因为逆地址解析是需要调用地图api的-只有在public/index.html正常引入百度地图时才会生效-->
<!--      var geoc = new BMap.Geocoder()-->
<!--      geoc.getLocation(Point, rs => {-->
<!--        console.log('点击地址-获取信息', rs)-->
<!--      })-->
<!--      console.log('执行解析完毕')-->
<!--    }-->
<!--  }-->
<!--}-->
<!--// 须知-->
<!--// 1.内网离线情况下我们访问不了百度数据资源，所有只有把数据资源下载在本地启动服务才可以解决这个问题-->
<!--// 2.确实可以满足基本的需求-->
<!--// 3.地图放大，缩小，控件，定位-->
<!--// 4.加载那里的地图我们首先要下载地图瓦片图，然后地图中心点定位在哪里就会加载的地图-->
<!--// 5.地图的放大等级我们要控制起来，因为是下载的瓦片图要对应-->
<!--// 6.瓦片图下载等级最好下载，11-15，刚好铺满全屏，再多就下载很慢-->
<!--// 7.开发时候我们用npm下载serve，把地图资源从本机运行起来（直接serve）-->
<!--// 8.所有地址最好写127.0.0.1和localhost方便测试（因为你后续直接断开网线测试时候，你就只能访问自己）-->
<!--// 瓦片图加载报错-404解决-->
<!--// 1.瓦片图，就是把一个地图区域根据放大等级分割成等额大小图片进行加载-->
<!--// 1.首先确定地图中心点经纬度和下载地图瓦片图是否是一致的-->
<!--// 2.瓦片图下载等级和代码地图限制放大等级是否一样（比如地图放大19级，但是下载地图没有19级图片也会报错）-->
<!--// 3.用serve启动好本地图片资源后-查看map_load.js文件（一般默认不用改）-->
<!--// 4..把404图片路径复制到本机浏览器看是否能访问-->
<!--// 优点-->
<!--// 1.引入项目比较轻便-确实在内网情况下可以使用(不能访问外网情况下-离线)-->
<!--// 缺点-->
<!--// 1.鼠标滚动的时候，会调用百度的api报错，但不影响使用-->
<!--// 2.百度api会失效，比如逆地址解析，没有建立百度资源连接带身份（就是没有在public/index-正常引入百度地图）-->
<!--// 3.如果单纯地图展示看，定位-可以，要使用api不满足-目前还没找到解决方案-->
<!--</script>--><style >
body,html{width: 100%;height: 100%;padding: 0;margin: 0;
}#container {width: 100vw;height: 100vh;
}
</style>

结果展示：运行vue项目，npm run dev 回车并在打开浏览器http://localhost:5173，可以看到如下内容：

在这里插入图片描述

鼠标点击任意位置显示如下：

在这里插入图片描述

另外可参考

vue3 vite或者vue2 百度地图(卫星图)离线使用详细讲解

1、在Windows上下载瓦片，使用的工具为: 全能电子地图下载器3.0最新版（推荐） 下载后解压，然后进入目录"全能电子地图下载器3.0最新版（推荐）\全能电子地图下载器3.0\MapTileDownloader" 在这个目录…...

编程日记 2026/3/17 23:05:46

Docker常用命令清单

一、镜像管理拉取镜像 docker pull [镜像名]:[标签] 示例：docker pull nginx:latest （记忆：pull拉取，类似git拉取代码） 构建镜像 docker build -t [镜像名]:[标签] . 示例：docker build -t myapp:v1 . &a…...

编程日记 2026/2/15 4:04:25

大语言模型从理论到实践（第二版）-学习笔记（绪论）

大语言模型的基本概念 1.理解语言是人工智能算法获取知识的前提 2.语言模型的目标就是对自然语言的概率分布建模 3.词汇表 V 上的语言模型，由函数 P(w1w2 wm) 表示，可以形式化地构建为词序列 w1w2 wm 的概率分布，表示词序列 w1w2 wm…...

编程日记 2026/3/15 18:54:16

Unity 通用UI界面逻辑总结

概述在游戏开发中，常常会遇到一些通用的界面逻辑，它不论在什么类型的游戏中都会出现。为了避免重复造轮子，本文总结并提供了一些常用UI界面的实现逻辑。希望可以帮助大家快速开发通用界面模块，也可以在次基础上进行扩展修改&…...

编程日记 2026/3/15 23:34:52

入门到入土，Java学习day15（常用API下）

group存数据 public String[] matches(String regex)判断字符串是否满足正则表达式的规则 public String replaceAll(String regex,String newStr)按照正则表达式的规则进行替换 public String[] split(String regex)按照正则表达式的规则切割字符串通常是创建网页对象&am…...

编程日记 2026/2/15 6:23:31

Navigation的进阶知识与拦截器配置

Navigation的进阶知识与拦截器配置写的不是很详细，后续有时间会补充，建议参考官方文档食用 1.如何配置路由信息 1.1 创建工程结构 src/main/ets ├── pages │ └── navigation │ ├── views │ │ ├── Mine.ets //…...

编程日记 2026/3/15 18:53:49

基于大模型的小脑扁桃体下疝畸形全流程预测与诊疗方案研究报告

目录一、引言 1.1 研究背景与目的 1.2 研究意义二、小脑扁桃体下疝畸形概述 2.1 定义与分类 2.2 发病机制与病因 2.3 临床表现 2.4 诊断方法三、大模型在小脑扁桃体下疝畸形预测中的应用 3.1 大模型介绍 3.2 数据收集与处理 3.3 模型训练与验证四、术前预测与…...

编程日记 2026/2/25 20:02:53

Java数据结构第二十一期：解构排序算法的艺术与科学(三)

专栏：Java数据结构秘籍个人主页：手握风云目录一、常见排序算法的实现 1.1. 归并排序二、排序算法复杂度及稳定性分析一、常见排序算法的实现 1.1. 归并排序归并排序是建⽴在归并操作上的⼀种有效的排序算法,该算法是采⽤分治法的一个⾮常典型的…...

编程日记 2026/3/18 10:51:42

go切片定义和初始化

1.简介切片是数组的一个引用，因此切片是引用类型，在进行传递时，遵守引用传递的机制。切片的使用和数组类似，遍历切片、访问切片的元素和切片的长度都一样。。切片的长度是可以变化的，因此切片是一个可以动态变化的数…...

编程日记 2026/3/15 17:43:28

使用 Docker 部署 Nginx，配置后端 API 轮询与多个子域名前端应用

使用 Docker 部署 Nginx，配置后端 API 轮询与多个子域名前端应用在这篇博客中，我们将介绍如何通过 Docker 部署 Nginx 服务器，并配置多个后端 API 的轮询负载均衡，同时通过子域名部署多个不同的前端应用。Nginx 将作为反向代…...

编程日记 2026/2/15 8:13:58

【NLP 39、激活函数 ⑤ Swish激活函数】

我的孤独原本是座荒岛，直到你称成潮汐，原来爱是让个体失序的永恒运动 ——25.2.25 Swish激活函数是一种近年来在深度学习中广泛应用的激活函数，由Google Brain团队在2017年提出。其核心设计结合了Sigmoid门控机制和线性输入的乘积&#xff0c…...

编程日记 2026/3/15 18:54:22

C语言经典案例-菜鸟经典案例

1.输入某年某月某日，判断这一天是这一年的第几天？ //输入某年某月某日，判断这一天是这一年的第几天？ #include <stdio.h>int isLeapYear(int year) {// 闰年的判断规则：能被4整除且（不能被100整除或…...

编程日记 2026/2/24 13:13:09

南开提出1Prompt1Story，无需训练，可通过单个连接提示实现一致的文本到图像生成。

（1Prompt1Story）是一种无训练的文本到图像生成方法，通过整合多个提示为一个长句子，并结合奇异值重加权（SVR）和身份保持交叉注意力（IPCA）技术，解决了生成图像中身份不一致…...

编程日记 2026/3/15 18:55:01

STM32驱动OLED屏幕全解析：从原理到温度显示实战（上） | 零基础入门STM32第五十三步

主题内容教学目的/扩展视频OLED显示屏重点课程电路原理，手册分析，驱动程序。初始化，清屏，ASCII字库，显示分区。调用显示函数。做带有加入图形和汉字显示的RTC时钟界面。讲字库的设计原理。师从洋桃电子，杜…...

编程日记 2026/3/15 18:53:27

MySQL语法总结

本篇博客说明： ！！！.注意此系列都用的是MySQL语句，和SQLServer，PostgreSQL有些细节上的差别！！！ 1.每个操作都是先展示出语法格式 2.然后是具体例子 3.本篇注脚与文本顺讯息…...

编程日记 2026/3/15 18:53:09

从预测到控制：电力RK3568边缘计算机在电网调度中的全面应用

在智能电网的快速发展中，电力Ubuntu工控机（简称“电力工控机”）作为核心设备，扮演着不可或缺的角色。特别是在智能电网调度场景中，电力工控机的高效、稳定和智能化特性，为电网的稳定运行和高效管理提供了强…...

编程日记 2026/3/15 18:54:04

Spring Batch 概览

Spring Batch 是什么？ Spring Batch 是 Spring 生态系统中的一个轻量级批处理框架，专门用于处理大规模数据任务。它特别适合企业级应用中需要批量处理数据的场景，比如数据迁移、报表生成、ETL（Extract-Transform-Load&#xff09…...

编程日记 2026/3/18 16:38:31

day-106 统计放置房子的方式数

思路动态规划：因为中间有街道隔开，所以只需计算一边街道的排列方式，最后计算平方即可解题过程动态转换方程：f[i]f[i-1]f[i-2] Code class Solution {int num 1000000007;public int countHousePlacements(int n) {int arr[…...

编程日记 2026/3/18 2:58:17

PostgreSQL安装和mcp PostgreSQL

文章目录一. 安装之后修改权限并登录1. 确保当前用户具有sudo权限2. 修改/etc/postgresql/<版本号>/main/pg_hba.conf配置文件为trust，可以免密登录3. 进行免密登录4. 添加root用户和修改postgres用户密码1. postgres用户密码2. 添加root用户3. 为root用户设…...

编程日记 2026/3/15 18:54:17

解决电脑问题（10）——桌面问题

电脑桌面出现问题的情况多样，以下是一些常见问题及解决方法： 桌面图标问题图标显示异常：如果图标模糊、失真或显示为未知图标，可能是图标缓存出现问题。在 Windows 系统中，可通过在任务管理器中重启 “Windows 资源管…...

编程日记 2025/4/9 23:04:40

LPZero: Language Model Zero-cost Proxy Search from Zero（未更新完预览版本）

LPZero代码摘要神经架构搜索 (NAS) 有助于自动执行有效的神经网络搜索，同时需要大量的计算资源，尤其是对于语言模型。零样本 NAS 利用零成本 (ZC) 代理来估计模型性能，从而显着降低计算需求。然而，现有的 ZC 代理严重依赖于深…...

编程日记 2026/3/18 2:25:28

字典树运用

字典树运用字典树LC208 创建字典树0-1字典树字典树字典树又叫前缀树， 是一种树形数据结构，用于高效地存储和检索字符串数据集中的键。这一数据结构有相当多的应用情景，例如自动补全和拼写检查。 LC208 创建字典树这是一个字符串字典树…...

编程日记 2026/3/15 18:53:25

RReadWriteLock读写锁应用场景

背景操作涉及一批数据，如订单，可能存在多个场景下操作，先使用读锁，从redis缓存中获取操作中数据比如关闭账单， 发起调账， 线下结算， 合并支付先判断当前操作的数据，是否在…...

编程日记 2026/3/10 6:41:09

26.卷1的答案

1.已知2010年小明的生日在8月28日——周六 ，从2011到2020，有几次生日在周末？ 做法：一个一个算下去,注意，平年365天，闰年366天，一共2次。 2.前序：ABDGKEHCFIJ，中序&…...

编程日记 2026/3/5 4:50:37

0087.springboot325基于Java的企业OA管理系统的设计与实现+论文

一、系统说明基于springbootvue的企业OA管理系统,系统功能齐全, 代码简洁易懂，适合小白学编程。传统办法管理信息首先需要花费的时间比较多，其次数据出错率比较高，而且对错误的数据进行更改也比较困难，最后，检索数…...

编程日记 2026/3/17 4:56:03

Spring Boot 3 整合 MinIO 实现分布式文件存储

引言文件存储已成为一个做任何应用都不可回避的需求。传统的单机文件存储方案在面对大规模数据和高并发访问时往往力不从心，而分布式文件存储系统则提供了更好的解决方案。本篇文章我将基于Spring Boot 3 为大家讲解如何基于MinIO来实现分布式文件存储。分布式存…...

编程日记 2026/3/15 15:38:39

Redis｜集群 Cluster

文章目录是什么能干嘛集群算法-分片-槽位slotredis集群的槽位slotredis集群的分片分片槽位的优势slot槽位映射——业界的3种解决方案小厂：哈希取余分区中厂：一致性哈希算法分区大厂：哈希槽分区面试题：为什么 Redis 集群的最大槽…...

编程日记 2026/3/15 18:54:07

【定制开发】碰一碰发视频系统定制开发，支持OEM

在短视频营销爆发的2025年，"碰一碰发视频"技术已成为实体商家引流标配。某连锁餐饮品牌通过定制化开发，单月视频发布量突破10万条，获客成本降低80%！本文将深入解析该系统的技术架构与开发要点，助你快速搭建高…...

编程日记 2026/3/15 18:53:23

【redis】布隆过滤器的Java实现

在Java中，要实现布隆过滤器（Bloom Filter）的方式有很多种，除了上一节中通过jedis包调用安装了布隆过滤器的redis外，还有以下几种常见的实现方式： 手写布隆过滤器基于guava包实现通过redis的bitmaps实现…...

编程日记 2026/3/7 4:06:35

【JAVA架构师成长之路】【电商系统实战】第12集：秒杀系统性能优化实战（CAN + Nginx + Sentinel）

30分钟课程：秒杀系统性能优化实战（CDN Nginx Sentinel） 课程目标掌握静态资源 CDN 加速的配置与优化策略。通过 Nginx 实现负载均衡，提升系统横向扩展能力。使用 Sentinel 实现服务降级，保障核心链路稳定性。课程…...

编程日记 2026/3/4 13:27:12

1、在Windows上下载瓦片，使用的工具为: 全能电子地图下载器3.0最新版（推荐）

下载后解压，然后进入目录"全能电子地图下载器3.0最新版（推荐）\全能电子地图下载器3.0\MapTileDownloader" 在这个目录下双击imaps.exe可打开如下界面

下载完成后会弹出个框，选择否即可

然后安装一个全局serve， 打开终端并输入npm install -g serve 安装完成后，进入到C:\MapDownload\baidumaps(如果修改瓦片保存路径了，则找到相应位置)然后执行serve并回车，如下所示表示成功

接下来创建vue3项目：npm create vue，回车并输入名字：vue3_baidu_map_offline，其他一律回车，然后进入项目，并安装所需要的包使使用命令 cnpm i 或者npm i，安装完成后下载百度地图离线工具：

下载并解压 将static目录及其子内容全部复制到src/assets目录下，结构如下：

修改App.vue的样式：将main.js中的import ‘./assets/main.css’ 注释掉或者删除了。然后查看你下载的瓦片图的后缀类型，比如这里的jpg

打开map_load.js做响应的路径及格式修改，比如对tiles_dir的修改，如果你的瓦片保存的为"C:\MapDownload\baidumaps\satellite\10\203" 就将这里边的satellite赋值给tiles_dir

map_load.js中的内容如下：

在vue项目的index.html中引入static中的三个静态文件，index.html中的内容如下：

App.vue中的内容如下，内包含如何离线使用百度地图api文档：

结果展示：运行vue项目，npm run dev 回车并在打开浏览器http://localhost:5173，可以看到如下内容：

鼠标点击任意位置显示如下：

相关文章：

然后安装一个全局serve，打开终端并输入npm install -g serve 安装完成后，进入到C:\MapDownload\baidumaps(如果修改瓦片保存路径了，则找到相应位置)然后执行serve并回车，如下所示表示成功

下载并解压将static目录及其子内容全部复制到src/assets目录下，结构如下：