前阵子行政提了个需求能不能在网页里做个考勤打卡员工进园区后在地图上能看到公司范围点一下按钮完成签到别再让大伙儿装 App。我第一反应是这活儿 Vue3 Leaflet 地图库加 Leaflet Draw 插件就能干而且能干净利落地收尾。为什么不用高德百度 SDK申请 key、企业认证、商用合规流程走下来这需求都能拖黄了。Leaflet 免费开源、插件生态成熟Draw 插件专门解决画围栏的问题配合 Vue3 的组合式 API一套前后端分离的考勤打卡功能两周内就能上线。这篇文章不吹概念直接按我的实现路径走技术选型、环境搭建、围栏绘制、打卡判断、踩坑实录、部署扩展每一段都有代码和思路照着抄能少走不少弯路。1. 从考勤需求到 Leaflet 选型为什么我不选高德地图 SDK1.1 先拆一遍需求别急着写代码地图考勤打卡看上去简单但细节拆开能列一长串员工进入考勤页面页面需要自动定位并展示当前位置管理员需要能在地图上划出公司考勤范围围栏这个范围要能随时调整员工打卡时系统判断当前坐标是否落在围栏内给出打卡成功或失败的结果打卡记录要包含时间、位置、打卡结果最好还能留一张地图快照当证据这类需求最大的难点不在定位而在围栏这个动态概念上——公司的办公区域不是永远固定临时办公点、外勤门店都可能成为打卡范围。如果围栏坐标写死在代码里每次调整都要发版这在工程上不可接受。所以围栏必须做成可配置的数据管理员在地图上画一次坐标存到后端员工端每次拉取最新围栏做匹配。这一下子就把技术方案圈定了需要一个能自由绘制多边形的 Web 地图库Leaflet 加 Leaflet Draw 几乎是这个场景下的最优解。1.2 Leaflet 与高德/百度 SDK 的取舍我在这类需求上做过对比简单列个表方案定位与底图绘制围栏能力商用成本坑位高德 JS API国内坐标体系 GCJ-02定位接口好用官方没有完整 Draw 组件得自己封装需要 key 和企业认证商用要合规审坐标系与 Leaflet 不通用后期换库成本高百度 JS APIGCJ-02 进一步偏移成 BD-09同样没有现成绘制插件同上底图风格偏旧WebGL 版本调试麻烦Leaflet OSM/第三方瓦片标准 WGS84定位走后端/浏览器Leaflet Draw 完成度极高开箱即用完全免费无 key 依赖国内底图加载速度要挑瓦片源选 Leaflet 的根本原因不是免费两个字而是它把绘制多边形这个核心能力交付得最完整。Leaflet Draw 支持画矩形、多边形、圆形、折线、标记点还能对已画图形做编辑和删除这套交互在高德百度生态里没有现成平替自己写一个拖拽节点、橡皮筋绘制的组件工程量是考勤功能本身的好几倍。底图问题也有解决办法Leaflet 不限制瓦片源我在国内项目里挂的是高德瓦片或者天地图瓦片配合坐标系转换就能用。考勤范围的方圆几公里瓦片偏差完全在可接受范围内后文我会讲到坐标系的处理。1.3 Vue3 组合式 API 与 Leaflet 实例的相处之道Vue3 和 Leaflet 没有官方的 binding 库不像 vue2-leaflet 那套老方案但这种非绑定反而更省心因为 Leaflet 本身就是面向命令式操作设计的你创建一个 map 实例往上面 addLayer、addControl它内部有自己完整的事件循环和渲染生命周期根本不需要 Vue 去管它的状态。真正要注意的是不要把一个 Leaflet 实例塞进 Vue3 的 reactive 响应式对象里。Leaflet 内部对象上有大量方法、事件处理器和 DOM 引用如果用 reactive() 包住 mapVue3 的 Proxy 会深度代理这些属性每次 Leaflet 内部读写属性都会触发 Proxy 的 get/set 拦截。正常跑还能工作一旦地图图层多了、marker 多了性能下降非常明显而且偶尔会出现地图拖不动点击没反应这种玄学问题。正确姿势是map 实例用普通let变量或shallowRef保存围栏图层集合 drewItems 用普通变量保存只有当前打卡状态围栏坐标数组这类真正的业务数据才放进 reactive/ref生命周期上onMounted里初始化地图onBeforeUnmount里调用map.remove()销毁实例并释放事件监听这是 Vue3 应用里 Leaflet 不会残留内存的底线。2. 项目脚手架与 Leaflet 基础环境搭建2.1 用 Vite 创建一个 Vue3 TS 项目考勤打卡这种中后台功能我习惯直接用 Vite 的 Vue TypeScript 模板开始省去后续补类型的麻烦。npm create vitelatest attendance-map -- --template vue-ts cd attendance-map npm installNode 版本建议 18 以上Vite 5 对 Node 的版本要求是 18如果你还在用 16 的旧环境多半会在 dev server 启动时报错。装完依赖后先npm run dev确认默认页面跑起来再继续加东西。2.2 安装 Leaflet 与 Leaflet Draw以及类型兜底npm install leaflet leaflet-draw npm install -D types/leaflet这里有一个新手经常卡住的问题types/leaflet-draw这个包存在但早已不维护和最新版leaflet-draw的类型对齐度很差。强行安装后你会在引用L.Control.Draw时看到一堆类型报错。我实际项目里的做法是不装types/leaflet-draw在src/types/leaflet-draw.d.ts里自己补一个最小声明declare module leaflet-draw { const Draw: any export default Draw }然后在用L.Control.Draw的地方统一(L.Control as any).Draw或直接any断言。Leaflet 核心库的类型保留Draw 插件的类型自己兜底这样既不会污染核心类型也能顺利编译。2.3 初始化地图核心组件代码地图容器是整页的我直接写一个MapContainer.vue组件template div refmapRef classmap-container/div /template script setup langts import { onMounted, onBeforeUnmount, ref } from vue import L from leaflet import leaflet/dist/leaflet.css import leaflet-draw/dist/leaflet.draw.css import leaflet-draw const mapRef refHTMLDivElement | null(null) let map: L.Map onMounted(() { map L.map(mapRef.value!, { center: [30.657, 104.065], // 以目标园区为中心 zoom: 16, zoomControl: true, }) L.tileLayer(https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png, { maxZoom: 19, attribution: copy; OpenStreetMap contributors, }).addTo(map) }) onBeforeUnmount(() { if (map) { map.remove() } }) /script style scoped .map-container { width: 100%; height: 100vh; } /style注意两点leaflet.draw.css必须引入否则绘制工具栏的图标、按钮样式全部丢失画完多边形后右上角那个完成保存的小勾也看不见。瓦片源我用的是 OSM国内访问速度不稳定生产环境建议换成国内 CDN 的瓦片比如高德瓦片https://webrd0{1-4}.is.autonavi.com/appmaptile?langzh_cnsize1scale1style8x{x}y{y}z{z}或天地图瓦片感官上快得多。2.4 图标丢失与样式引入的新手三连这个坑基本每个 Leaflet 新手都会踩一次默认的 marker 图标在构建后变成一片空白控制台报找不到marker-icon.png。原因是 Leaflet 的 CSS 里用相对路径引用了图片资源Vite 打包时不会自动把这些图片复制到正确位置。解决办法是手动指定图标资源import L from leaflet import iconUrl from leaflet/dist/images/marker-icon.png import iconRetinaUrl from leaflet/dist/images/marker-icon-2x.png import shadowUrl from leaflet/dist/images/marker-shadow.png delete (L.Icon.Default.prototype as any)._getIconUrl L.Icon.Default.mergeOptions({ iconUrl, iconRetinaUrl, shadowUrl, })这一段最好放在main.ts或地图模块的顶部执行确保后续所有 marker 都能正常显示。如果你不打算用默认 marker而是用自定义的 divIcon那这个坑可以不填。另一个容易忽略的是map.invalidateSize()。凡是地图初始化时容器还处于隐藏状态比如在 Tab 弹窗、折叠面板里初始化完成后地图区域经常是灰的或偏移的。等到容器真正可见了必须手动调用nextTick(() { map.invalidateSize() })invalidateSize会重新计算地图的容器尺寸和中心点这是地图渲染不出来类问题的第一排查项。3. Leaflet Draw 围栏绘制从画个圈到拿到可用坐标数据3.1 把围栏设计成数据而不是写死在代码里考勤围栏如果只是固定的一个园区当然可以直接把经纬度写死。但现实中很多公司是流动式的总部、分部、临时展会、驻场项目地每隔一段时间围栏就会变。所以我在设计时把围栏拆成了两个角色管理员端进入围栏管理模式地图上显示 Draw 控件画完保存坐标发给后端员工端只加载后端最新的围栏并展示只读不显示 Draw 控件这样一套地图代码两种模式一份数据。围栏本质上就是一个多边形坐标数组[ { lat: 30.657, lng: 104.065 }, { lat: 30.658, lng: 104.068 }, { lat: 30.656, lng: 104.069 } ]存储和传输都简单前端拿到数据后用L.polygon()画出来即可。3.2 启用 Draw 控件之前的配置细节在 Vue3 里给地图加 Draw 控件代码不复杂难在知道要配置哪些选项。一个典型的初始化import L from leaflet import leaflet-draw const drawnItems L.featureGroup().addTo(map) const drawControl new (L.Control as any).Draw({ position: topright, draw: { polygon: { allowIntersection: false, // 禁止画出自相交多边形 showArea: true, // 绘制时显示面积 shapeOptions: { color: #1888ff, }, }, polyline: false, circle: false, rectangle: { shapeOptions: { color: #1888ff, }, }, marker: false, circlemarker: false, }, edit: { featureGroup: drawnItems, remove: true, }, }) map.addControl(drawControl)这里我把circle、marker、polyline都关掉了业务上考勤围栏只需要多边形和矩形矩形本质是四点多边形。少暴露入口管理员学习成本就低误操作也少。allowIntersection: false这个选项非常推荐打开它能防止管理员画出一个蝴蝶结式的自相交多边形这种多边形在做点包含判断时结果不可预期。featureGroup是 Draw 插件管理的图层组所有画出来的图形都会自动加进去编辑和删除也基于它所以它和 Draw 控件是一对一绑定的。3.3 从 draw:created 事件中提取经纬度每次画完一个图形Draw 插件会触发draw:created事件事件对象e.layer就是刚画的图形对象。这里关键点在于不同的图形类型获取坐标的方式不同。map.on(L.Draw.Event.CREATED, (e: any) { const layer e.layer // 如果是 Polygon 或 Rectangle if (layer instanceof L.Polygon) { const latlngs layer.getLatLngs() // latlngs 是嵌套数组[0] 是外环 const outerRing latlngs[0] as L.LatLng[] const fencePoints outerRing.map((latlng) ({ lat: latlng.lat, lng: latlng.lng, })) // 这里把 fencePoints 发给后端或保存到本地 } // 加入 drawnItems保证后续编辑/删除能被跟踪 drawnItems.addLayer(layer) })我最初踩过一个坑直接用layer.getLatLngs()的完整返回值去存结果发现它是一个多层嵌套数组。比如多边形坐标在[0][0]、[0][1]这种索引上多边形的洞在更深层。如果不加[0]直接扁平化处理保存的围栏数据要么为空要么顺序错乱。所以对 Polygon 取latlngs[0]作为外环是判断围栏的基础。矩形稍微有点特殊L.Rectangle继承自L.PolygongetLatLngs()返回也是外环数组四个点顺时针/逆时针不一定但点在多边形判断不关心方向所以可以直接当 Polygon 处理。3.4 编辑、删除事件与坐标回填光能画还不够考勤围栏隔几个月要改一次边界。Draw 插件自带的编辑能力是点一下图形左上角的铅笔图标进入节点编辑模式拖拽节点改变形状点垃圾桶图标删除图形。但是要注意编辑完成之后触发的不是draw:created而是draw:edited和draw:deleted。如果只监听created你会发现在地图上改了围栏半天后端存的数据还是老版本。map.on(L.Draw.Event.EDITED, (e: any) { const layers e.layers layers.eachLayer((layer: any) { if (layer instanceof L.Polygon) { const latlngs layer.getLatLngs() const outerRing latlngs[0] as L.LatLng[] const fencePoints outerRing.map((latlng) ({ lat: latlng.lat, lng: latlng.lng, })) // 保存最新 fencePoints } }) }) map.on(L.Draw.Event.DELETED, () { // 清空围栏数据或置空提示 })还有一个体验细节保存成功之后最好做一个状态标识避免管理员画完忘记保存就退出页面。我通常在draw:created之后把页面右上角保存围栏按钮置亮点击后才真正把数据 POST 到后端。4. 打卡判断与数据闭环定位、围栏校验、结果快照4.1 浏览器定位能用但有前提员工端的地图没有那么复杂进入页面全屏地图显示当前位置下方一个打卡按钮。定位我优先用浏览器原生的navigator.geolocation不需要额外引入 SDKfunction getCurrentPosition(): Promise{ lat: number; lng: number } { return new Promise((resolve, reject) { if (!navigator.geolocation) { reject(new Error(当前浏览器不支持定位)) return } navigator.geolocation.getCurrentPosition( (pos) { resolve({ lat: pos.coords.latitude, lng: pos.coords.longitude, }) }, (err) { reject(err) }, { enableHighAccuracy: true, timeout: 10000, maximumAge: 0, } ) }) }三个选项值得说明一下enableHighAccuracy: true在手机上会调用 GPS在城市里定位精度能到十几米比基站定位准得多timeout: 10000防止定位一直转圈不出结果maximumAge: 0每次都重新定位避免拿到很久之前的缓存位置往围栏里判但有个硬前提Chrome 等现代浏览器只在HTTPS或localhost环境下才开放 Geolocation API。如果是公司内网 HTTP 部署这个接口会直接失败。我在上线前踩过这个坑页面在本地npm run dev一切正常部署到内网就提示定位失败排查半天才发现是浏览器安全策略。生产环境要么上 HTTPS要么适配其他定位途径。如果公司在国内也可以换高德 JS API 的定位插件它用的是高德服务器 IP 定位 辅助 GPS兼容性更好但问题是它是 GCJ-02 坐标和 Leaflet 默认 WGS84 不匹配需要做坐标转换这涉及到加密坐标的偏移算法。我的建议是能上 HTTPS 就用浏览器定位省心又准。如果必须要用国内定位服务再考虑引入高德 SDK 并用coordtransform之类的库转坐标。4.2 围栏内的几何判断用 Turf.js 一锤定音拿到管理员画的围栏坐标数组和员工当前位置后剩下来最核心的就是回答一个问题当前坐标是否在多边形内部Leaflet 本身没有提供点在多边形内的判断方法但空间分析的活 Turf.js 是专业选手。安装npm install turf/turf然后判断import { booleanPointInPolygon, point, polygon } from turf/turf const fencePoints [...围栏坐标数组] const fencePolygon polygon([fencePoints.map((p) [p.lng, p.lat])]) const userPoint point([currentLng, currentLat]) const isInside booleanPointInPolygon(userPoint, fencePolygon) if (isInside) { // 打卡成功 } else { // 打卡失败提示员工进入围栏范围后再试 }这里有个小细节polygon()方法接收的坐标是[经度, 纬度]的顺序而 Leaflet 的L.LatLng是{ lat, lng }的顺序两个顺序方向相反我第一次写就直接翻车了判断结果永远为 false。每次做这种转换都先写个 map 把{ lat, lng }转成[lng, lat]数组。4.3 组装打卡接口与状态 UI完整流程串起来大概是页面进入加载围栏并L.polygon(...).addTo(map)自动定位把当前定位点 marker 加到地图上点击上班打卡按钮拿到当前位置做 Turf 判断把结果时间、经纬度、围栏 ID、是否成功POST 给后端前端根据后端返回显示打卡结果并生成一条本地记录打卡的核心方法可以这样写async function handleClockIn() { const loading showLoading() try { const current await getCurrentPosition() // 在地图上更新一个定位 marker if (currentMarker) { currentMarker.setLatLng([current.lat, current.lng]) } else { currentMarker L.marker([current.lat, current.lng]).addTo(map) } const isInside booleanPointInPolygon( point([current.lng, current.lat]), fencePolygon ) if (!isInside) { showToast(不在考勤范围内请进入园区后再打卡) return } const res await fetch(/api/attendance/clock-in, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ lat: current.lat, lng: current.lng, time: Date.now(), fenceId: currentFenceId, }), }) if (res.ok) { showSuccess(打卡成功) // 刷新考勤记录 } } catch (err) { showError(定位失败请检查浏览器定位权限) } finally { loading.close() } }4.4 打卡快照保存现场证据考勤打卡经常有争议员工说我明明在园区里HR 说后台显示没有记录。为了避免拉扯我在打卡成功时还做了一步地图快照——把地图当前画面截成图片随打卡记录一起保存。Leaflet 有leaflet-image插件可以基于 canvas 把地图导出为 base64 图片但兼容性一般尤其在高分屏下质量不稳定。更通用的方案是用html2canvas直接截取地图容器 DOMimport html2canvas from html2canvas async function captureMapSnapshot() { const mapEl document.querySelector(.map-container) as HTMLElement const canvas await html2canvas(mapEl, { useCORS: true, backgroundColor: #fff, }) const base64 canvas.toDataURL(image/png) // base64 存入打卡记录 return base64 }但html2canvas对 Leaflet 的 canvas 瓦片层支持也有坑截出来的图片经常是空白或残缺。最稳妥也不依赖额外插件的办法是复制当前视图需要的核心数据围栏坐标、当前位置、时间、打卡结果在结果弹窗里用纯 DOM 画一张地图卡片配合html2canvas去截这个自定义 DOM。这样图片上是干净整洁的考勤信息而不是一张带有瓦片版权标注的地图。5. 你会遇到的坑Leaflet Draw 在 Vue3 下的兼容性排查记录5.1 最隐蔽的坑HTTP 协议下的定位静默失败我在部署阶段被坑得最惨的一次就是定位在开发环境正常、生产环境直接挂。前面提到过Chrome 只在安全上下文HTTPS 或 localhost里开放 Geolocation API。上了内网 HTTP 环境后navigator.geolocation.getCurrentPosition的回调既不走success也不走error而是压根不执行控制台也没有明显报错所有代码好像死在了定位那一步。排查链路是先在后端打日志看有没有打卡请求进来发现没有再看前端有没有报错发现没有最后在定位处手动console.log才发现回调根本没触发。这属于浏览器安全策略的静默失败。解决办法要么生产环境配 HTTPS要么用高德定位 SDK 绕过去。5.2 响应式代理干扰 Leaflet 对象还有一次地图拖拽卡顿到怀疑人生用户每拖动一次地图CPU 直接拉满。排查到最后发现代码里有人把map实例放进了reactive({})里。Vue3 的reactive用 Proxy 深度代理对象Leaflet 内部有大量高频属性访问每次都被 Proxy 拦截性能自然爆炸。这个问题在团队协作时特别容易埋进来因为单看代码const state reactive({ map: null }); state.map L.map(...)好像没毛病但实际用起来性能就是不对。规范做法是凡涉及 Leaflet 对象map、featureGroup、marker、layer的变量一律用普通let声明或者用shallowRef把响应式代理挡在外面。5.3 draw:created 数据结构不稳定必须先判型Draw 插件允许你同时开启多种图形但有些考勤管理页面为了灵活把 marker、circle 也打开了。这时候draw:created里拿到的e.layer可能是L.Marker、L.Circle、L.Polyline、L.Polygon它们的取坐标方法完全不同。我见过同事直接对e.layer.getLatLngs()一把梭结果在画 marker 的时候直接报getLatLngs is not a function页面白屏。所以事件里第一行就做类型判断map.on(L.Draw.Event.CREATED, (e: any) { if (!(e.layer instanceof L.Polygon)) { return } // 只有 Polygon 才处理围栏逻辑 })如果业务里允许圆形围栏另写一个instanceof L.Circle的分支从getLatLng()和getRadius()拿到圆心和半径用distance判断打卡距离。5.4 二次编辑拿不到坐标问题出在事件类型这个坑是改完没保存最常见的根源。管理员在页面画好围栏第一次保存成功。后来想调整边界拖拽节点改了一番点保存结果后端围栏还是旧数据。原因就是前端只监听了draw:created而编辑完成的回调是draw:edited事件。而且draw:edited的e.layers是一个LayerGroup需要eachLayer遍历才能拿到每个图层。补上监听之后情况立刻正常。类似地删除动作触发draw:deleted如果删除后没把后端围栏置空下一次员工端拉取围栏还会拉到旧坐标。5.5 地图销毁、容器切换与 invalidateSize在我把考勤功能做成弹窗内嵌地图时遇到了一个烦人的问题第一次打开弹窗地图渲染正常关闭弹窗再打开地图变灰色控制台一堆报错。原因是我在弹窗关闭时销毁了地图但 Vue 的弹窗组件复用同一个 DOM 节点第二次初始化时 Leaflet 发现容器已经被初始化过了内部状态错乱。后来改成弹窗每次打开时先nextTick再初始化地图关闭时只隐藏弹窗不销毁地图或者严格按照onBeforeUnmount中map.remove()的顺序来销毁。如果地图放在 Tab 页签里切换 Tab 还要在activated钩子里调一次map.invalidateSize()否则地图容器尺寸变化后瓦片会留白。5.6 类型声明缺失的兜底方案leaflet-draw没有官方类型types/leaflet-draw又不维护那个包里对L.Control.Draw的声明还停留在老版本和现在的leaflet-draw1.0.4对不上。硬装类型包的结果就是编译报错多到不想看。我的建议是干脆不装types/leaflet-draw自己在src/types下写一个.d.ts文件把用到的Draw相关对象全部声明为any。宁可牺牲一点类型提示也不要和过时类型搏斗。6. 部署与扩展从单点打卡到企业管理后台6.1 构建产物与 nginx 部署Vue3 项目构建很简单npm run build产物生成在dist/目录。如果部署到 nginx并且用了 Vue Router 的 history 模式需要把非文件请求全部回退到index.htmlserver { listen 80; server_name your-domain.com; root /usr/share/nginx/html/attendance; index index.html; location / { try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://backend-server:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }这里把/api/单独代理到后端服务前端打卡请求的fetch(/api/attendance/clock-in)就不需要写死域名部署时可以随时切换环境。生产环境别忘了配 HTTPS不然浏览器定位会被安全策略挡掉整个考勤功能废掉一半。6.2 后端接口设计的原则后端接口设计相对简单我贴一个最小可用的设计思路接口方法说明/api/fenceGET获取当前生效的围栏列表/api/fencePOST保存/更新围栏坐标/api/attendance/clock-inPOST上班打卡/api/attendance/clock-outPOST下班打卡/api/attendance/recordsGET查询打卡记录打卡记录表的核心字段id、user_id、typein/out、lat、lng、resultsuccess/fail、fence_id、create_time、snapshot_url。其中snapshot_url存储打卡时前端上传的地图快照图片地址。后端收到前端上传的 base64 图片后转存到对象存储或服务器本地返回一个图片 URL。6.3 后续扩展方向考勤打卡做完后我发现这个Leaflet Draw 绘制围栏的组合可以延伸出好几个实用功能多个围栏管理把Fence做成独立表支持一个企业有多个考勤范围员工在不同办公区打卡时自动匹配对应围栏操作和员工-围栏的关联关系绑定考勤报表根据已存的打卡记录按天/周/月统计迟到、缺卡、正常出勤前端用 ECharts 画柱状图和热力图移动端适配当前页面是全屏地图手机上 Leaflet 的触摸缩放体验尚可但 Draw 控件在窄屏下不好操作。可以做一个快捷键管理员在 PC 上画围栏员工在手机上只做打卡离线路网点缓存用 Leaflet 的瓦片缓存策略把常用区域的瓦片提前缓存到 IndexedDB员工在园区网络差时也能看到地图至于和 Vue3 后台管理系统的融合目前主流的若依、jeecgboot 这类框架的前端都兼容 Vue3把考勤页面作为子路由嵌进去即可。但要注意这些框架自带的页面布局可能影响地图容器尺寸进入页面时务必调用map.invalidateSize()不然地图渲染区域会错位。回到最初的需求一个网页考勤打卡最终落地形态是员工手机浏览器打开页面自动定位看到自己所在的园区围栏点一下按钮打卡成功HR 在后台随时调整围栏范围查看每日打卡记录。整个链路里Leaflet 和 Leaflet Draw 承担了最重的两个部分——地图展示与围栏绘制Vue3 则把它们干净地集成进了业务框架。地图库本身并不难难的是把定位、绘制、判断、存储这条数据链打通并且提前避开浏览器安全策略和响应式代理这些暗坑。希望这篇记录能让你在实现同样的功能时少走点弯路。 
长河君 · 2026/9/14 5:42:35 · 阅读 1.2k Vue3+Leaflet实现地图考勤打卡：围栏绘制与定位判断实战
前阵子行政提了个需求能不能在网页里做个考勤打卡员工进园区后在地图上能看到公司范围点一下按钮完成签到别再让大伙儿装 App。我第一反应是这活儿 Vue3 Leaflet 地图库加 Leaflet Draw 插件就能干而且能干净利落地收尾。为什么不用高德百度 SDK申请 key、企业认证、商用合规流程走下来这需求都能拖黄了。Leaflet 免费开源、插件生态成熟Draw 插件专门解决画围栏的问题配合 Vue3 的组合式 API一套前后端分离的考勤打卡功能两周内就能上线。这篇文章不吹概念直接按我的实现路径走技术选型、环境搭建、围栏绘制、打卡判断、踩坑实录、部署扩展每一段都有代码和思路照着抄能少走不少弯路。1. 从考勤需求到 Leaflet 选型为什么我不选高德地图 SDK1.1 先拆一遍需求别急着写代码地图考勤打卡看上去简单但细节拆开能列一长串员工进入考勤页面页面需要自动定位并展示当前位置管理员需要能在地图上划出公司考勤范围围栏这个范围要能随时调整员工打卡时系统判断当前坐标是否落在围栏内给出打卡成功或失败的结果打卡记录要包含时间、位置、打卡结果最好还能留一张地图快照当证据这类需求最大的难点不在定位而在围栏这个动态概念上——公司的办公区域不是永远固定临时办公点、外勤门店都可能成为打卡范围。如果围栏坐标写死在代码里每次调整都要发版这在工程上不可接受。所以围栏必须做成可配置的数据管理员在地图上画一次坐标存到后端员工端每次拉取最新围栏做匹配。这一下子就把技术方案圈定了需要一个能自由绘制多边形的 Web 地图库Leaflet 加 Leaflet Draw 几乎是这个场景下的最优解。1.2 Leaflet 与高德/百度 SDK 的取舍我在这类需求上做过对比简单列个表方案定位与底图绘制围栏能力商用成本坑位高德 JS API国内坐标体系 GCJ-02定位接口好用官方没有完整 Draw 组件得自己封装需要 key 和企业认证商用要合规审坐标系与 Leaflet 不通用后期换库成本高百度 JS APIGCJ-02 进一步偏移成 BD-09同样没有现成绘制插件同上底图风格偏旧WebGL 版本调试麻烦Leaflet OSM/第三方瓦片标准 WGS84定位走后端/浏览器Leaflet Draw 完成度极高开箱即用完全免费无 key 依赖国内底图加载速度要挑瓦片源选 Leaflet 的根本原因不是免费两个字而是它把绘制多边形这个核心能力交付得最完整。Leaflet Draw 支持画矩形、多边形、圆形、折线、标记点还能对已画图形做编辑和删除这套交互在高德百度生态里没有现成平替自己写一个拖拽节点、橡皮筋绘制的组件工程量是考勤功能本身的好几倍。底图问题也有解决办法Leaflet 不限制瓦片源我在国内项目里挂的是高德瓦片或者天地图瓦片配合坐标系转换就能用。考勤范围的方圆几公里瓦片偏差完全在可接受范围内后文我会讲到坐标系的处理。1.3 Vue3 组合式 API 与 Leaflet 实例的相处之道Vue3 和 Leaflet 没有官方的 binding 库不像 vue2-leaflet 那套老方案但这种非绑定反而更省心因为 Leaflet 本身就是面向命令式操作设计的你创建一个 map 实例往上面 addLayer、addControl它内部有自己完整的事件循环和渲染生命周期根本不需要 Vue 去管它的状态。真正要注意的是不要把一个 Leaflet 实例塞进 Vue3 的 reactive 响应式对象里。Leaflet 内部对象上有大量方法、事件处理器和 DOM 引用如果用 reactive() 包住 mapVue3 的 Proxy 会深度代理这些属性每次 Leaflet 内部读写属性都会触发 Proxy 的 get/set 拦截。正常跑还能工作一旦地图图层多了、marker 多了性能下降非常明显而且偶尔会出现地图拖不动点击没反应这种玄学问题。正确姿势是map 实例用普通let变量或shallowRef保存围栏图层集合 drewItems 用普通变量保存只有当前打卡状态围栏坐标数组这类真正的业务数据才放进 reactive/ref生命周期上onMounted里初始化地图onBeforeUnmount里调用map.remove()销毁实例并释放事件监听这是 Vue3 应用里 Leaflet 不会残留内存的底线。2. 项目脚手架与 Leaflet 基础环境搭建2.1 用 Vite 创建一个 Vue3 TS 项目考勤打卡这种中后台功能我习惯直接用 Vite 的 Vue TypeScript 模板开始省去后续补类型的麻烦。npm create vitelatest attendance-map -- --template vue-ts cd attendance-map npm installNode 版本建议 18 以上Vite 5 对 Node 的版本要求是 18如果你还在用 16 的旧环境多半会在 dev server 启动时报错。装完依赖后先npm run dev确认默认页面跑起来再继续加东西。2.2 安装 Leaflet 与 Leaflet Draw以及类型兜底npm install leaflet leaflet-draw npm install -D types/leaflet这里有一个新手经常卡住的问题types/leaflet-draw这个包存在但早已不维护和最新版leaflet-draw的类型对齐度很差。强行安装后你会在引用L.Control.Draw时看到一堆类型报错。我实际项目里的做法是不装types/leaflet-draw在src/types/leaflet-draw.d.ts里自己补一个最小声明declare module leaflet-draw { const Draw: any export default Draw }然后在用L.Control.Draw的地方统一(L.Control as any).Draw或直接any断言。Leaflet 核心库的类型保留Draw 插件的类型自己兜底这样既不会污染核心类型也能顺利编译。2.3 初始化地图核心组件代码地图容器是整页的我直接写一个MapContainer.vue组件template div refmapRef classmap-container/div /template script setup langts import { onMounted, onBeforeUnmount, ref } from vue import L from leaflet import leaflet/dist/leaflet.css import leaflet-draw/dist/leaflet.draw.css import leaflet-draw const mapRef refHTMLDivElement | null(null) let map: L.Map onMounted(() { map L.map(mapRef.value!, { center: [30.657, 104.065], // 以目标园区为中心 zoom: 16, zoomControl: true, }) L.tileLayer(https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png, { maxZoom: 19, attribution: copy; OpenStreetMap contributors, }).addTo(map) }) onBeforeUnmount(() { if (map) { map.remove() } }) /script style scoped .map-container { width: 100%; height: 100vh; } /style注意两点leaflet.draw.css必须引入否则绘制工具栏的图标、按钮样式全部丢失画完多边形后右上角那个完成保存的小勾也看不见。瓦片源我用的是 OSM国内访问速度不稳定生产环境建议换成国内 CDN 的瓦片比如高德瓦片https://webrd0{1-4}.is.autonavi.com/appmaptile?langzh_cnsize1scale1style8x{x}y{y}z{z}或天地图瓦片感官上快得多。2.4 图标丢失与样式引入的新手三连这个坑基本每个 Leaflet 新手都会踩一次默认的 marker 图标在构建后变成一片空白控制台报找不到marker-icon.png。原因是 Leaflet 的 CSS 里用相对路径引用了图片资源Vite 打包时不会自动把这些图片复制到正确位置。解决办法是手动指定图标资源import L from leaflet import iconUrl from leaflet/dist/images/marker-icon.png import iconRetinaUrl from leaflet/dist/images/marker-icon-2x.png import shadowUrl from leaflet/dist/images/marker-shadow.png delete (L.Icon.Default.prototype as any)._getIconUrl L.Icon.Default.mergeOptions({ iconUrl, iconRetinaUrl, shadowUrl, })这一段最好放在main.ts或地图模块的顶部执行确保后续所有 marker 都能正常显示。如果你不打算用默认 marker而是用自定义的 divIcon那这个坑可以不填。另一个容易忽略的是map.invalidateSize()。凡是地图初始化时容器还处于隐藏状态比如在 Tab 弹窗、折叠面板里初始化完成后地图区域经常是灰的或偏移的。等到容器真正可见了必须手动调用nextTick(() { map.invalidateSize() })invalidateSize会重新计算地图的容器尺寸和中心点这是地图渲染不出来类问题的第一排查项。3. Leaflet Draw 围栏绘制从画个圈到拿到可用坐标数据3.1 把围栏设计成数据而不是写死在代码里考勤围栏如果只是固定的一个园区当然可以直接把经纬度写死。但现实中很多公司是流动式的总部、分部、临时展会、驻场项目地每隔一段时间围栏就会变。所以我在设计时把围栏拆成了两个角色管理员端进入围栏管理模式地图上显示 Draw 控件画完保存坐标发给后端员工端只加载后端最新的围栏并展示只读不显示 Draw 控件这样一套地图代码两种模式一份数据。围栏本质上就是一个多边形坐标数组[ { lat: 30.657, lng: 104.065 }, { lat: 30.658, lng: 104.068 }, { lat: 30.656, lng: 104.069 } ]存储和传输都简单前端拿到数据后用L.polygon()画出来即可。3.2 启用 Draw 控件之前的配置细节在 Vue3 里给地图加 Draw 控件代码不复杂难在知道要配置哪些选项。一个典型的初始化import L from leaflet import leaflet-draw const drawnItems L.featureGroup().addTo(map) const drawControl new (L.Control as any).Draw({ position: topright, draw: { polygon: { allowIntersection: false, // 禁止画出自相交多边形 showArea: true, // 绘制时显示面积 shapeOptions: { color: #1888ff, }, }, polyline: false, circle: false, rectangle: { shapeOptions: { color: #1888ff, }, }, marker: false, circlemarker: false, }, edit: { featureGroup: drawnItems, remove: true, }, }) map.addControl(drawControl)这里我把circle、marker、polyline都关掉了业务上考勤围栏只需要多边形和矩形矩形本质是四点多边形。少暴露入口管理员学习成本就低误操作也少。allowIntersection: false这个选项非常推荐打开它能防止管理员画出一个蝴蝶结式的自相交多边形这种多边形在做点包含判断时结果不可预期。featureGroup是 Draw 插件管理的图层组所有画出来的图形都会自动加进去编辑和删除也基于它所以它和 Draw 控件是一对一绑定的。3.3 从 draw:created 事件中提取经纬度每次画完一个图形Draw 插件会触发draw:created事件事件对象e.layer就是刚画的图形对象。这里关键点在于不同的图形类型获取坐标的方式不同。map.on(L.Draw.Event.CREATED, (e: any) { const layer e.layer // 如果是 Polygon 或 Rectangle if (layer instanceof L.Polygon) { const latlngs layer.getLatLngs() // latlngs 是嵌套数组[0] 是外环 const outerRing latlngs[0] as L.LatLng[] const fencePoints outerRing.map((latlng) ({ lat: latlng.lat, lng: latlng.lng, })) // 这里把 fencePoints 发给后端或保存到本地 } // 加入 drawnItems保证后续编辑/删除能被跟踪 drawnItems.addLayer(layer) })我最初踩过一个坑直接用layer.getLatLngs()的完整返回值去存结果发现它是一个多层嵌套数组。比如多边形坐标在[0][0]、[0][1]这种索引上多边形的洞在更深层。如果不加[0]直接扁平化处理保存的围栏数据要么为空要么顺序错乱。所以对 Polygon 取latlngs[0]作为外环是判断围栏的基础。矩形稍微有点特殊L.Rectangle继承自L.PolygongetLatLngs()返回也是外环数组四个点顺时针/逆时针不一定但点在多边形判断不关心方向所以可以直接当 Polygon 处理。3.4 编辑、删除事件与坐标回填光能画还不够考勤围栏隔几个月要改一次边界。Draw 插件自带的编辑能力是点一下图形左上角的铅笔图标进入节点编辑模式拖拽节点改变形状点垃圾桶图标删除图形。但是要注意编辑完成之后触发的不是draw:created而是draw:edited和draw:deleted。如果只监听created你会发现在地图上改了围栏半天后端存的数据还是老版本。map.on(L.Draw.Event.EDITED, (e: any) { const layers e.layers layers.eachLayer((layer: any) { if (layer instanceof L.Polygon) { const latlngs layer.getLatLngs() const outerRing latlngs[0] as L.LatLng[] const fencePoints outerRing.map((latlng) ({ lat: latlng.lat, lng: latlng.lng, })) // 保存最新 fencePoints } }) }) map.on(L.Draw.Event.DELETED, () { // 清空围栏数据或置空提示 })还有一个体验细节保存成功之后最好做一个状态标识避免管理员画完忘记保存就退出页面。我通常在draw:created之后把页面右上角保存围栏按钮置亮点击后才真正把数据 POST 到后端。4. 打卡判断与数据闭环定位、围栏校验、结果快照4.1 浏览器定位能用但有前提员工端的地图没有那么复杂进入页面全屏地图显示当前位置下方一个打卡按钮。定位我优先用浏览器原生的navigator.geolocation不需要额外引入 SDKfunction getCurrentPosition(): Promise{ lat: number; lng: number } { return new Promise((resolve, reject) { if (!navigator.geolocation) { reject(new Error(当前浏览器不支持定位)) return } navigator.geolocation.getCurrentPosition( (pos) { resolve({ lat: pos.coords.latitude, lng: pos.coords.longitude, }) }, (err) { reject(err) }, { enableHighAccuracy: true, timeout: 10000, maximumAge: 0, } ) }) }三个选项值得说明一下enableHighAccuracy: true在手机上会调用 GPS在城市里定位精度能到十几米比基站定位准得多timeout: 10000防止定位一直转圈不出结果maximumAge: 0每次都重新定位避免拿到很久之前的缓存位置往围栏里判但有个硬前提Chrome 等现代浏览器只在HTTPS或localhost环境下才开放 Geolocation API。如果是公司内网 HTTP 部署这个接口会直接失败。我在上线前踩过这个坑页面在本地npm run dev一切正常部署到内网就提示定位失败排查半天才发现是浏览器安全策略。生产环境要么上 HTTPS要么适配其他定位途径。如果公司在国内也可以换高德 JS API 的定位插件它用的是高德服务器 IP 定位 辅助 GPS兼容性更好但问题是它是 GCJ-02 坐标和 Leaflet 默认 WGS84 不匹配需要做坐标转换这涉及到加密坐标的偏移算法。我的建议是能上 HTTPS 就用浏览器定位省心又准。如果必须要用国内定位服务再考虑引入高德 SDK 并用coordtransform之类的库转坐标。4.2 围栏内的几何判断用 Turf.js 一锤定音拿到管理员画的围栏坐标数组和员工当前位置后剩下来最核心的就是回答一个问题当前坐标是否在多边形内部Leaflet 本身没有提供点在多边形内的判断方法但空间分析的活 Turf.js 是专业选手。安装npm install turf/turf然后判断import { booleanPointInPolygon, point, polygon } from turf/turf const fencePoints [...围栏坐标数组] const fencePolygon polygon([fencePoints.map((p) [p.lng, p.lat])]) const userPoint point([currentLng, currentLat]) const isInside booleanPointInPolygon(userPoint, fencePolygon) if (isInside) { // 打卡成功 } else { // 打卡失败提示员工进入围栏范围后再试 }这里有个小细节polygon()方法接收的坐标是[经度, 纬度]的顺序而 Leaflet 的L.LatLng是{ lat, lng }的顺序两个顺序方向相反我第一次写就直接翻车了判断结果永远为 false。每次做这种转换都先写个 map 把{ lat, lng }转成[lng, lat]数组。4.3 组装打卡接口与状态 UI完整流程串起来大概是页面进入加载围栏并L.polygon(...).addTo(map)自动定位把当前定位点 marker 加到地图上点击上班打卡按钮拿到当前位置做 Turf 判断把结果时间、经纬度、围栏 ID、是否成功POST 给后端前端根据后端返回显示打卡结果并生成一条本地记录打卡的核心方法可以这样写async function handleClockIn() { const loading showLoading() try { const current await getCurrentPosition() // 在地图上更新一个定位 marker if (currentMarker) { currentMarker.setLatLng([current.lat, current.lng]) } else { currentMarker L.marker([current.lat, current.lng]).addTo(map) } const isInside booleanPointInPolygon( point([current.lng, current.lat]), fencePolygon ) if (!isInside) { showToast(不在考勤范围内请进入园区后再打卡) return } const res await fetch(/api/attendance/clock-in, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ lat: current.lat, lng: current.lng, time: Date.now(), fenceId: currentFenceId, }), }) if (res.ok) { showSuccess(打卡成功) // 刷新考勤记录 } } catch (err) { showError(定位失败请检查浏览器定位权限) } finally { loading.close() } }4.4 打卡快照保存现场证据考勤打卡经常有争议员工说我明明在园区里HR 说后台显示没有记录。为了避免拉扯我在打卡成功时还做了一步地图快照——把地图当前画面截成图片随打卡记录一起保存。Leaflet 有leaflet-image插件可以基于 canvas 把地图导出为 base64 图片但兼容性一般尤其在高分屏下质量不稳定。更通用的方案是用html2canvas直接截取地图容器 DOMimport html2canvas from html2canvas async function captureMapSnapshot() { const mapEl document.querySelector(.map-container) as HTMLElement const canvas await html2canvas(mapEl, { useCORS: true, backgroundColor: #fff, }) const base64 canvas.toDataURL(image/png) // base64 存入打卡记录 return base64 }但html2canvas对 Leaflet 的 canvas 瓦片层支持也有坑截出来的图片经常是空白或残缺。最稳妥也不依赖额外插件的办法是复制当前视图需要的核心数据围栏坐标、当前位置、时间、打卡结果在结果弹窗里用纯 DOM 画一张地图卡片配合html2canvas去截这个自定义 DOM。这样图片上是干净整洁的考勤信息而不是一张带有瓦片版权标注的地图。5. 你会遇到的坑Leaflet Draw 在 Vue3 下的兼容性排查记录5.1 最隐蔽的坑HTTP 协议下的定位静默失败我在部署阶段被坑得最惨的一次就是定位在开发环境正常、生产环境直接挂。前面提到过Chrome 只在安全上下文HTTPS 或 localhost里开放 Geolocation API。上了内网 HTTP 环境后navigator.geolocation.getCurrentPosition的回调既不走success也不走error而是压根不执行控制台也没有明显报错所有代码好像死在了定位那一步。排查链路是先在后端打日志看有没有打卡请求进来发现没有再看前端有没有报错发现没有最后在定位处手动console.log才发现回调根本没触发。这属于浏览器安全策略的静默失败。解决办法要么生产环境配 HTTPS要么用高德定位 SDK 绕过去。5.2 响应式代理干扰 Leaflet 对象还有一次地图拖拽卡顿到怀疑人生用户每拖动一次地图CPU 直接拉满。排查到最后发现代码里有人把map实例放进了reactive({})里。Vue3 的reactive用 Proxy 深度代理对象Leaflet 内部有大量高频属性访问每次都被 Proxy 拦截性能自然爆炸。这个问题在团队协作时特别容易埋进来因为单看代码const state reactive({ map: null }); state.map L.map(...)好像没毛病但实际用起来性能就是不对。规范做法是凡涉及 Leaflet 对象map、featureGroup、marker、layer的变量一律用普通let声明或者用shallowRef把响应式代理挡在外面。5.3 draw:created 数据结构不稳定必须先判型Draw 插件允许你同时开启多种图形但有些考勤管理页面为了灵活把 marker、circle 也打开了。这时候draw:created里拿到的e.layer可能是L.Marker、L.Circle、L.Polyline、L.Polygon它们的取坐标方法完全不同。我见过同事直接对e.layer.getLatLngs()一把梭结果在画 marker 的时候直接报getLatLngs is not a function页面白屏。所以事件里第一行就做类型判断map.on(L.Draw.Event.CREATED, (e: any) { if (!(e.layer instanceof L.Polygon)) { return } // 只有 Polygon 才处理围栏逻辑 })如果业务里允许圆形围栏另写一个instanceof L.Circle的分支从getLatLng()和getRadius()拿到圆心和半径用distance判断打卡距离。5.4 二次编辑拿不到坐标问题出在事件类型这个坑是改完没保存最常见的根源。管理员在页面画好围栏第一次保存成功。后来想调整边界拖拽节点改了一番点保存结果后端围栏还是旧数据。原因就是前端只监听了draw:created而编辑完成的回调是draw:edited事件。而且draw:edited的e.layers是一个LayerGroup需要eachLayer遍历才能拿到每个图层。补上监听之后情况立刻正常。类似地删除动作触发draw:deleted如果删除后没把后端围栏置空下一次员工端拉取围栏还会拉到旧坐标。5.5 地图销毁、容器切换与 invalidateSize在我把考勤功能做成弹窗内嵌地图时遇到了一个烦人的问题第一次打开弹窗地图渲染正常关闭弹窗再打开地图变灰色控制台一堆报错。原因是我在弹窗关闭时销毁了地图但 Vue 的弹窗组件复用同一个 DOM 节点第二次初始化时 Leaflet 发现容器已经被初始化过了内部状态错乱。后来改成弹窗每次打开时先nextTick再初始化地图关闭时只隐藏弹窗不销毁地图或者严格按照onBeforeUnmount中map.remove()的顺序来销毁。如果地图放在 Tab 页签里切换 Tab 还要在activated钩子里调一次map.invalidateSize()否则地图容器尺寸变化后瓦片会留白。5.6 类型声明缺失的兜底方案leaflet-draw没有官方类型types/leaflet-draw又不维护那个包里对L.Control.Draw的声明还停留在老版本和现在的leaflet-draw1.0.4对不上。硬装类型包的结果就是编译报错多到不想看。我的建议是干脆不装types/leaflet-draw自己在src/types下写一个.d.ts文件把用到的Draw相关对象全部声明为any。宁可牺牲一点类型提示也不要和过时类型搏斗。6. 部署与扩展从单点打卡到企业管理后台6.1 构建产物与 nginx 部署Vue3 项目构建很简单npm run build产物生成在dist/目录。如果部署到 nginx并且用了 Vue Router 的 history 模式需要把非文件请求全部回退到index.htmlserver { listen 80; server_name your-domain.com; root /usr/share/nginx/html/attendance; index index.html; location / { try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://backend-server:8080; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }这里把/api/单独代理到后端服务前端打卡请求的fetch(/api/attendance/clock-in)就不需要写死域名部署时可以随时切换环境。生产环境别忘了配 HTTPS不然浏览器定位会被安全策略挡掉整个考勤功能废掉一半。6.2 后端接口设计的原则后端接口设计相对简单我贴一个最小可用的设计思路接口方法说明/api/fenceGET获取当前生效的围栏列表/api/fencePOST保存/更新围栏坐标/api/attendance/clock-inPOST上班打卡/api/attendance/clock-outPOST下班打卡/api/attendance/recordsGET查询打卡记录打卡记录表的核心字段id、user_id、typein/out、lat、lng、resultsuccess/fail、fence_id、create_time、snapshot_url。其中snapshot_url存储打卡时前端上传的地图快照图片地址。后端收到前端上传的 base64 图片后转存到对象存储或服务器本地返回一个图片 URL。6.3 后续扩展方向考勤打卡做完后我发现这个Leaflet Draw 绘制围栏的组合可以延伸出好几个实用功能多个围栏管理把Fence做成独立表支持一个企业有多个考勤范围员工在不同办公区打卡时自动匹配对应围栏操作和员工-围栏的关联关系绑定考勤报表根据已存的打卡记录按天/周/月统计迟到、缺卡、正常出勤前端用 ECharts 画柱状图和热力图移动端适配当前页面是全屏地图手机上 Leaflet 的触摸缩放体验尚可但 Draw 控件在窄屏下不好操作。可以做一个快捷键管理员在 PC 上画围栏员工在手机上只做打卡离线路网点缓存用 Leaflet 的瓦片缓存策略把常用区域的瓦片提前缓存到 IndexedDB员工在园区网络差时也能看到地图至于和 Vue3 后台管理系统的融合目前主流的若依、jeecgboot 这类框架的前端都兼容 Vue3把考勤页面作为子路由嵌进去即可。但要注意这些框架自带的页面布局可能影响地图容器尺寸进入页面时务必调用map.invalidateSize()不然地图渲染区域会错位。回到最初的需求一个网页考勤打卡最终落地形态是员工手机浏览器打开页面自动定位看到自己所在的园区围栏点一下按钮打卡成功HR 在后台随时调整围栏范围查看每日打卡记录。整个链路里Leaflet 和 Leaflet Draw 承担了最重的两个部分——地图展示与围栏绘制Vue3 则把它们干净地集成进了业务框架。地图库本身并不难难的是把定位、绘制、判断、存储这条数据链打通并且提前避开浏览器安全策略和响应式代理这些暗坑。希望这篇记录能让你在实现同样的功能时少走点弯路。