![\"simple\"](\"/img/pet/simple01.jpg\")
\n![\"simple\"](\"/img/pet/simple02.jpg\")
写在前面
这是一篇站在中文开发者立场的横评。
\n为了避免主观偏见，我设计了一道 1 小时实战题目：用 Vue 3 + TypeScript 实现一个完整的「在线 JSON 格式化工具」。然后分别让 Cursor + Claude Sonnet 4.7、Cursor + Claude Opus 4.5、DeepSeek-V3 三套主流组合各写一遍，最后用 6 维评分卡打分。
\n文末给出 2026 年的选型建议矩阵——你最关心的「国内访问、价格、中文表达力」全部直面。
\n本文与已发布的 Cursor 完全教程 / DeepSeek 完全使用指南 是互补关系，那两篇讲单独的工具使用，本文讲组合对比与选型决策。
\n| 引擎组合 | 性质 | 上手难度 | 月成本（个人） |\n|
\n", "date_published": "2026-05-12T00:00:00.000Z", "date_modified": "2026-05-12T06:40:23.000Z", "authors": [ { "name": "罗玄聪 luoxuancong" } ], "tags": [ "Software" ] }, { "title": "Grid++Report 在 Vue 3 项目的完整接入指南（2026）— 网页预览、iframe 嵌入、PDF 导出、ERP 发票打印全攻略", "url": "https://www.lxc666.cn/blogs/RuiLang/ruilang-vue3.html", "id": "https://www.lxc666.cn/blogs/RuiLang/ruilang-vue3.html", "summary": "2026 版锐浪报表 Vue 3 + TypeScript + Composition API 完整实战，覆盖网页预览、iframe 嵌入、打印多页、PDF 导出、ERP 销售发票真实案例。延续 2021 版基础入门，专攻 B 端报表系统集成。", "content_html": "写在前面
这是一篇接续我 2021 年所写 《锐浪报表 Grid++Report 使用教程 - Web 打印解决方案》 的 2026 进阶版。
\n5 年过去了，Vue 3 + TypeScript + Composition API 已成主流，浏览器 NPAPI/Chrome 扩展插件机制大变，锐浪报表也持续迭代，网页预览成为新主流方案。
\n本文专攻几个高频搜索问题：Grid++Report 网页预览实现、Vue WEB 报表插件接入、Vue 3 + TypeScript 完整封装、ERP/用友风格的销售发票打印。
\n| 维度 | 2021 老文 | 本文（2026） |\n|
\n", "date_published": "2026-05-12T00:00:00.000Z", "date_modified": "2026-05-12T06:20:18.000Z", "authors": [ { "name": "罗玄聪 luoxuancong" } ], "tags": [ "RuiLang" ] }, { "title": "2026 完整指南：从零搭建 Vue 3 + VuePress 2 个人技术博客（HTTPS/PWA/SEO/广告/评论全栈）", "url": "https://www.lxc666.cn/blogs/VuePress/vuepress2-build-blog.html", "id": "https://www.lxc666.cn/blogs/VuePress/vuepress2-build-blog.html", "summary": "从 npm init 到博客上线带广告，覆盖 VuePress 2 + theme-reco + Nginx + Let's Encrypt + AdSense + Waline 完整链路，3000+ 字真实踩坑记录。", "content_html": "写在前面
这是一篇我用 90 天时间，把一个 2018 年起步的旧博客升级成 2026 版 VuePress 2 站点的完整复盘。
\n全程踩过的坑：CSP 与广告联盟冲突、PWA 预缓存吞掉新 CSP、PWA 预缓存 404、SAN 证书签发、theme-reco 默认页脚 ICP 不是原生 <a>……一篇文章给你全部答案。
博客线上地址：https://www.lxc666.cn（你正在看的这个站）
\n2026 年还有人写个人技术博客吗？有，而且活得很好。但选什么框架，主流已经从 5 年前的「Hexo / Hugo」分化出更多选择。我做选型时对比了 4 个主流方案：
\n| 框架 | 语言 | 主题生态 | 适合人群 | 短板 |\n|
\n", "date_published": "2026-05-12T00:00:00.000Z", "date_modified": "2026-05-12T08:15:48.000Z", "authors": [ { "name": "罗玄聪 luoxuancong" } ], "tags": [ "VuePress" ] }, { "title": "2026年 Cursor AI 编程完全教程 - 从安装到 Agent 模式，真实开发体验分享", "url": "https://www.lxc666.cn/blogs/Software/cursor.html", "id": "https://www.lxc666.cn/blogs/Software/cursor.html", "summary": "2026年最全 Cursor AI 编程教程，真实项目开发体验。涵盖下载安装、核心快捷键、Agent模式详解、Rules规则配置、Tab智能补全、多文件编辑、DeepSeek/Claude模型切换、Pro订阅方案对比。附大量实战技巧和避坑指南。", "content_html": "Cursor 是一款基于 VS Code 的 AI 代码编辑器，但它不只是\"加了个 AI 插件\"这么简单。从 2024 年火到 2026 年，它已经从\"AI 辅助编码\"进化到了 \"AI 自主编程\" 的阶段。
\n我用 Cursor 开发了多个完整项目，这篇教程把我积累的实战经验全部分享出来。
\n\n", "date_published": "2026-03-09T00:00:00.000Z", "date_modified": "2026-03-09T13:45:51.000Z", "authors": [ { "name": "luoxuancong", "url": "https://github.com/luoxuancong" } ], "tags": [ "Software" ] }, { "title": "2026年 DeepSeek 完全使用指南 - 国产最强AI，注册到API调用一篇搞定", "url": "https://www.lxc666.cn/blogs/Software/deepseek.html", "id": "https://www.lxc666.cn/blogs/Software/deepseek.html", "summary": "2026年最全的 DeepSeek 使用教程，国产最强 AI 大模型。涵盖网页版注册使用、DeepSeek V3/R1 模型对比、API Key 申请、Python/Node.js 代码调用、OpenAI 兼容接口、费用对比及省钱技巧。附实测体验和避坑指南。", "content_html": "2025 年初 DeepSeek 横空出世，直接把国产 AI 的天花板捅破了。到 2026 年 3 月，它已经成为国内开发者用得最多的 AI 大模型之一。
\n为什么这么火？三个字：开源、便宜、强。
\n最近技术圈有个项目特别火 —— OpenClaw，一个开源的本地 AI Agent 平台，GitHub Star 数已经飙到 287k+。
\n简单说，它能让你在本地跑一个 AI 助手，接入 Telegram / WhatsApp / Discord 等聊天平台，而且支持多模型、多智能体、工具调用，相当于一个能操控你电脑的私人 AI 管家。
\n我自己折腾了好几天，踩了不少坑，最后成功部署了多 Bot + 多智能体的架构。这篇文章把所有经验整理出来，保证是你能找到的最详细的教程。
\n\n", "date_published": "2026-03-09T00:00:00.000Z", "date_modified": "2026-03-09T13:45:51.000Z", "authors": [ { "name": "luoxuancong", "url": "https://github.com/luoxuancong" } ], "tags": [ "Software" ] }, { "title": "ClipVid - 免费在线视频去水印下载工具，支持抖音/快手/小红书/B站", "url": "https://www.lxc666.cn/blogs/Software/clipvid.html", "id": "https://www.lxc666.cn/blogs/Software/clipvid.html", "summary": "ClipVid是一款完全免费的在线视频去水印下载工具，支持抖音、快手、小红书、B站、微博、TikTok等平台，无需注册，粘贴链接即可下载无水印高清原视频。", "content_html": "刷了好几年短视频，我终于找到了一个真正好用的去水印工具 —— ClipVid。
\n说实话，之前试过很多类似的工具，要么收费、要么弹广告、要么只支持一个平台，体验都不太行。ClipVid 是目前用下来最满意的一个，推荐给有同样需求的朋友。
\n\n", "date_published": "2026-03-06T00:00:00.000Z", "date_modified": "2026-03-06T05:51:26.000Z", "authors": [ { "name": "luoxuancong", "url": "https://github.com/luoxuancong" } ], "tags": [ "Software" ] }, { "title": "Node.js入门教程 - 从零开始学习后端开发", "url": "https://www.lxc666.cn/blogs/node/node.html", "id": "https://www.lxc666.cn/blogs/node/node.html", "summary": "Node.js入门教程，涵盖基础概念、npm使用、Express框架等内容，适合前端开发者学习后端开发。", "content_html": "📅
本文写于 2020 年，当时使用的是 Node.js v12.16.1。目前 Node.js 已更新至 v20+ LTS 版本，部分 API 和最佳实践可能已发生变化，请结合最新官方文档参考阅读。
\n\n\n版本
\n
\nnode -v
V 12.16.1
\nnode
\n在node环境中可以输入js代码并立马执行
node\nWelcome to Node.js v12.16.1. \nType \".help\" for more information. \n100+200 \n300\nWARNING
\n\n\n
\n- 新建一个js文件,命名hello.js,输入以下代码
\n
console.log('hello word')\n\n\n\n
\n- 使用cmd命令cd 进入到当前js文件的目录,然后 输入 node hello.js,
\n
C:\\Users\\Administrator>cd desktop\nC:\\Users\\Administrator\\Desktop>node hello.js\nhello word\nhello word 成功输入，说明程序运行成功！
\nDANGER
一定要先进入当前js文件的目录，不然会报错
\nTIP
腾讯地图 JavaScript API 是腾讯提供的免费地图开发接口，适用于 Web 端地图应用开发。
\nTIP
Grid++Report 是一款功能强大的报表工具，支持 Web 端打印，是企业级应用中常用的报表解决方案。
\n关于本页
最开始是在公众号【软件安装管家】中来安装一系列的软件。源链接已全部失效了，现在又找到了新大陆，我只是搬运工，所有功劳归功于【软件安装管家目录】公众号！点击软件名称可跳转到对应的安装教程合集。
\n手机查找：点右上角 ··· → 搜索页面内容；电脑查找：Ctrl+F
压缩解压 WinRAR · 7-ZIP · BandZip · 360压缩
\n文件工具 Everything · OneCommander · XYplorer · ReNamer
\n卸载清理 CCleaner · IObit Uninstaller · Uninstall Tool · Geek · Autodesk卸载 · Adobe卸载 · Ashampoo
\n\n驱动软件 驱动人生(离线版) · 驱动精灵(离线版) · 360驱动大师(绿色版) · 驱动总裁(绿色版) · 联想驱动管理
\n\n视频工具 ClipVid 视频去水印下载 · 格式工厂 · 剪映国际版(CapCut) · 剪映 · 完美解码 · Potplayer · 快剪辑 · Wondershare Uniconverter · AnyVideo Converter
\n系统修复 软媒蓝屏助手 · 傲梅分区助手 · DLL修复工具 · .NET修复工具 · 微软运行库 · 图吧工具箱
\n系统优化 Wise Care 365 · Glary Utilities · Advanced SystemCare · Ashampoo WinOptimizer
\n壁纸桌面 Lively Wallpaper · WinDynamicDesktop · 4K壁纸下载器 · AutoDarkModeX · Stardock Fences
\n截图录屏 Pixpin · FastStone · ScreenToGif · Snipaste
\n远程控制 WanGooe · 向日葵 · AnyViewer · ToDesk · RayLink · RustDesk
\n浏览器 Google浏览器 · Microsoft Edge · 火狐 · 360浏览器 · QQ浏览器 · 搜狗浏览器
\n\n\nVMware虚拟机 · 微PE工具箱 · Windows 11 · Windows 10 · Windows 7
\nOffice · WPS · OfficeSuite · Visio · Project · Xmind · LaTex · DeepL · STranslate · 几何画板 · 安卓模拟器 · 手写模拟器
\nPDF编辑 Acrobat DC · PDFgear · Solid Converter PDF · PDF-XChange · PDF Candy
\n文献管理 Endnote · Zotero · Mendeley · NoteExpress · CiteSpace · CAJViewer
\n终端工具 IShell · FinalShell · Easy Connect · PuTTY
\nAI工具 DeepSeek · Kimi AI · OfficeAI · 百度AI创作工具 · 讯飞星火 · Stable Diffusion · AI FaceSwap
\nPhotoshop(PS) · PS插件库 · Ps Elements · Illustrator(Ai) · InDesign(Id) · InCopy(Ic) · Lightroom(LRC) · LR插件库 · SketchBook · Bridge(Br) · ACDSee · PaintTool SAI · Capture One · Corel Painter · Krita · FrameMaker · Luminar · QuarkXPress · Nik Collection · Clip Studio Paint EX
\nTopaz系列 JPEG to RAW · Gigapixel · DeNoise · Mask · Sharpen · Studio · Video Enhance · Adjust
\nDxO系列 FilmPack · ViewPoint · PureRAW · PhotoLab
\nPremiere(Pr) · Pr Elements · After Effects(Ae) · Ae插件库 · Prelude(Pl) · Media Encoder(ME) · Character Animator(CH) · Maya · C4D · Arnold for C4D · Corona for C4D · Octane for C4D · DaVinci Resolve(达芬奇) · Edius · Audition(AU) · Audacity · Cubase · Nuendo · QuickTime
\n屏幕录像 OBS Studio · EV录屏 · 360录屏 · Icecream Screen Recorder · Mirillis Action · Bandicam(班迪录屏) · 屏幕录像专家 · oCam
\nCAD · CAD精简版 · CAD插件库 · CAD机械版 · CAD建筑版 · CAD电气版 · CAD Map3D · CAD MEP · CAD Plant3D · 中望CAD · 中望CAD机械版 · 中望CAD建筑版 · 浩辰CAD
\nCAXA系列 电子图板 · 3D实体设计 · 工艺图表 · CAM制造工程师 · CAM数控车
\n\n3ds Max · 草图大师(SketchUp) · 坯子插件库 · V-Ray for 3ds Max · V-Ray for SketchUp · V-Ray for Rhino · Corona for 3ds Max · 八猴(Marmoset Toolbag) · Lumion · Enscape · Blender · Dimension(Dn) · CorelCAD · 酷家乐 · Artlantis · SimLab Composer
\nSubstance 3D Designer · Modeler · Painter · Sampler · Stager
\nSolidWorks(SW) · Rhinoceros(犀牛) · Mastercam · PowerMill · Pro/E · Creo · UG NX · CATIA · CATIA Composer · Solid Edge · Inventor
\nRevit(BIM) · Navisworks · Civil 3D · Fuzor · Tekla Structures · Vectorworks · Adobe XD · Autodesk Vred · Marvelous Designer · ArcGIS Desktop
\nDreamweaver(DW) · Axure RP · Fireworks(FW) · Animate(An) · Flash
\nVisual Studio Code · Visual Studio · Python · Anaconda3 · JDK(Java) · R语言 · RStudio · Eclipse · MyEclipse · Android Studio · LabVIEW · Unity · HBuilderX · Sublime Text · Notepad++ · Typora · VB · VC++ · Dev C++ · PSPad Editor · Quartus II · CIMCO Edit · Step7
\n\nJetBrains系列 IntelliJ IDEA · WebStorm · PyCharm · PhpStorm · GoLand · CLion · Rider · RubyMine · DataGrip
\nMatlab · Mathematica · SQL Server · MySQL · Navicat Premium · Tableau · Origin · Minitab · LINGO · Maple · Amos · SigmaPlot · Mplus · Mathcad · Cytoscape · AxMath(MathType) · Avantage · JMP Pro · NCSS · Design Expert · SAS
\nANSYS · Abaqus · Adams · COMSOL · Tecplot 360 EX · Midas NFX · Midas Civil · Altair HyperWorks · DynaForm · VERICUT · FLAC3D · Materials Studio · PSIM Demo
\nAltium Designer(AD) · Multisim · Proteus · Altair PSIM · Cadence SPB · Eplan Electric · GX Works
\nENVI · TIA Portal(博途) · EViews · Dynamo · ESI VA One · Flo Therm · ArcGIS Pro · PCL Geomatica · Petrel · Autodesk Mudbox · Autodesk Moldflow · Global Mapper · ABB RobotStudio · Jade · ChemDraw · Google Earth Pro · WinCC · Ansys Zemax OpticStudio · Alias AutoStudio · PASS · ArtCAM · Vero Visi
\n化学软件 OMNIC · 红外光谱图库导入 · ChemSketch · Gaussian 09W · InDraw · 仿真化学实验室 · GaussView
\n生物软件 Oligo · MEGA · Primer Premier · Image-Pro Plus · ImageJ/FIJI
\n📅
本文写于 2019 年，介绍的是 Element UI（Vue 2 版本）。如果你在使用 Vue 3，请改用 Element Plus，API 有较大变化。
\nTIP
Element UI 是饿了么前端团队开发的 Vue 组件库，广泛应用于后台管理系统开发。
\n📅
本文写于 2019 年，基于 Vue 2 + Element UI。如果你在使用 Vue 3，建议查看 vue-element-plus-admin 等 Vue 3 版本的替代方案。
\nTIP
vue-element-admin 是一个基于 Vue 和 Element UI 的后台管理系统解决方案，提供了丰富的功能和组件。
\n大家好！今天给大家推荐一个超实用的在线工具 —— LxcTool，专门用来批量处理图片的神器！
\n如果你经常需要：
\n那这个工具绝对能帮到你！最重要的是完全免费，无需注册，打开即用！
\n\n", "date_published": "2025-01-15T00:00:00.000Z", "date_modified": "2026-03-06T05:51:26.000Z", "authors": [ { "name": "luoxuancong", "url": "https://github.com/luoxuancong" } ], "tags": [ "Software" ] }, { "title": "Mac软件安装教程大全 - 2025最新破解版资源", "url": "https://www.lxc666.cn/blogs/Software/stepMac.html", "id": "https://www.lxc666.cn/blogs/Software/stepMac.html", "summary": "Mac系统常用软件安装教程汇总，包括开发工具、设计软件、办公软件等，附破解版下载链接。", "content_html": "\nTIP
用 Mac 的同学应该也经常刷短视频吧？推荐一个在线工具 ClipVid，粘贴链接就能下载无水印的原视频。
\n抖音、快手、小红书、B站、微博、TikTok 都支持。Safari / Chrome 打开 clipvid.vip 就能用，不用装任何软件。免费、不用注册。
\n\n", "date_published": "2023-01-20T00:00:00.000Z", "date_modified": "2026-03-06T05:51:26.000Z", "authors": [ { "name": "luoxuancong", "url": "https://github.com/luoxuancong" } ], "tags": [ "Software" ] }, { "title": "Simple and Kitty - 生活记录与感悟", "url": "https://www.lxc666.cn/blogs/Life/simpleAndkitty.html", "id": "https://www.lxc666.cn/blogs/Life/simpleAndkitty.html", "summary": "记录生活中的点滴美好，分享与小猫咪的日常。", "content_html": "simple是陪伴了我们8年的狗子，性格高傲没什么朋友，对喜欢的人很友好，不喜欢的就很凶！
\n\n\n
kitty是我们家马上要迎来的小猫子，今天下班后就去接它。
\n![\"simple\"](\"/img/pet/kitty01.jpg\")
希望Simple跟Kitty能好好相处，成为彼此的好朋友。
\n", "image": "https://www.lxc666.cn/img/pet/simple01.jpg", "date_published": "2020-08-28T00:00:00.000Z", "date_modified": "2026-02-13T03:58:21.000Z", "authors": [ { "name": "luoxuancong", "url": "https://github.com/luoxuancong" } ], "tags": [ "Life" ] }, { "title": "JavaScript ES6新特性详解 - Map、Set、解构赋值等", "url": "https://www.lxc666.cn/blogs/JavaScript/js.html", "id": "https://www.lxc666.cn/blogs/JavaScript/js.html", "summary": "详解JavaScript ES6新特性，包括Map、Set数据结构、解构赋值、箭头函数、Promise等，附代码示例。", "content_html": "📅
本文写于 2019 年，介绍的 ES6 基础特性（Map、Set、解构赋值等）至今仍然通用。但 JavaScript 语言已新增许多特性（如可选链 ?.、空值合并 ??、顶层 await 等），建议结合 MDN 文档 了解最新特性。
TIP
手头上的项目这两天差不多整完了，稍有空闲时间，想着复习一下基本的JS知识，巩固一下自己的知识体系。正好看看 廖雪峰老师的博客 学习一下。
\nMap
\n在JavaScript的对象中，key值必须是字符串，才可以使用 . 来直接取值。
const obj = {666:'我是value'}\nobj.666 // Uncaught SyntaxError: Unexpected number\nobj[666] // '我是value'\nMap 是一组键值对的结构，具有极快的查找速度。
举个例子，假设要根据同学的名字查找对应的成绩，如果用Array实现，需要两个Array：
var names = ['Michael', 'Bob', 'Tracy'];\nvar scores = [95, 75, 85];\n给定一个名字，要查找对应的成绩，就先要在names中找到对应的位置，再从scores取出对应的成绩，Array越长，耗时越长。
\n如果用Map实现，只需要一个“名字”,“成绩”的对照表，直接根据名字查找成绩，无论这个表有多大，查找速度都不会变慢。用JavaScript写一个Map如下：
\nvar m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);\nm.get('Michael'); // 95\n初始化Map需要一个二维数组，或者直接初始化一个空Map。Map具有以下方法：
var m = new Map(); // 空Map\nm.set('Adam', 67); // 添加新的key-value\nm.set('Bob', 59);\nm.has('Adam'); // 是否存在key 'Adam': true\nm.get('Adam'); // 67\nm.delete('Adam'); // 删除key 'Adam'\nm.get('Adam'); // undefined\n由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉：
\nvar m = new Map();\nm.set('Adam', 67);\nm.set('Adam', 88);\nm.get('Adam'); // 88\n个人感觉使用Map时，数据源得按照Map的格式定义好，如果还需要重新遍历来设置格式化，感觉性能提升不大。
\n关于Map的性能提升这个比喻相当合理
\n\n\n唐伯虎点秋香那个场景记得吧
\nobj就像那群盖着盖头的姑娘，你要找到秋香，得一个个去掀盖头； map是姑娘们一出来没盖头，看到秋香牵着就走；
\n
Set
\nSet和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。
要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set：
var s1 = new Set(); // 空Set\nvar s2 = new Set([1, 2, 3]); // 含1, 2, 3\n重复元素在Set中自动被过滤：
var s = new Set([1, 2, 3, 3, '3']);\ns; // Set {1, 2, 3, \"3\"}\n注意数字3和字符串'3'是不同的元素。
通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果：
s.add(4);\ns; // Set {1, 2, 3, 4}\ns.add(4);\ns; // 仍然是 Set {1, 2, 3, 4}\n通过delete(key)方法可以删除元素：
var s = new Set([1, 2, 3]);\ns; // Set {1, 2, 3}\ns.delete(3);\ns; // Set {1, 2}\nTIP
最近由于个人原因需要下载一些音乐，发现很多平台都需要开通 vip 才能下载，后来发现了这款破解版的音乐软件，基本上所有音乐都可以听、能下载。
\n📅
本文写于 2020 年，介绍的微信小程序动态 class 绑定方式至今仍适用。不过微信小程序框架已持续更新，建议同时参考 微信官方文档 获取最新 API。
\nTIP
最近在做一个小程序的项目时，要实现一个多选标签的功能，发现动态绑定class名称的时候发现了一些问题，将最后实现的方法记录下来。
\n<!-- .wxml 文件 -->\n// 定义数组中是否包含某个元素的事件，记得要在顶部定义，或者引入wxs,不然不会生效\n<wxs module=\"m1\">\n var hasItem = function(list,item) {\n var boo;\n var index = list.indexOf(item)\n if (index < 0){\n boo = false;\n }else{\n boo = true;\n } \n return boo; \n }\n module.exports.hasItem = hasItem;\n</wxs>\n<view>\n <div class=\"tags-content\">\n <div class=\"title\">选择<span>供应</span>产品分类</div>\n <div class=\"content\">\n <van-grid gutter=\"10\" column-num=\"3\">\n <block wx:for=\"{{list}}\" wx:key=\"curCode\">\n \t\t<!-- 在这里动态绑定class类名 -->\n <van-grid-item class=\"{{m1.hasItem(checkSupplyList,item.curCode)?'on':''}}\" use-slot data-name=\"{{item.curName}}\" data-code=\"{{item.curCode}}\"\n bindtap=\"checkSupply\">\n {{item.curName}}\n </van-grid-item>\n </block>\n </van-grid>\n </div>\n <div class=\"bottom-btn\">\n <button bindtap=\"next\" type=\"primary\">下一步</button>\n </div>\n </div>\n</view>\n // hasItem.wxs 中定义\n var hasItem = function(list,item) {\n var boo;\n var index = list.indexOf(item)\n if (index < 0){\n boo = false;\n }else{\n boo = true;\n } \n return boo; \n }\n module.exports.hasItem = hasItem;\n\n <!-- wxml中引入 -->\n <wxs src=\"../hasItem.wxs\" module=\"hasItem\" />\n记住想要在小程序wxml中使用函数,一定得定义wxs! wxs官方文档
\n", "date_published": "2020-02-18T00:00:00.000Z", "date_modified": "2026-03-25T14:17:06.000Z", "authors": [ { "name": "luoxuancong", "url": "https://github.com/luoxuancong" } ], "tags": [ "WeApp" ] }, { "title": "高德地图API教程 - Vue中实现16+途经点线路规划", "url": "https://www.lxc666.cn/blogs/MAP/gaode.html", "id": "https://www.lxc666.cn/blogs/MAP/gaode.html", "summary": "使用高德地图JavaScript API在Vue项目中实现超过16个途经点的线路规划，附完整代码示例。", "content_html": "TIP
最近做了一个装配运输的项目，其中有一个【线路规划】的功能，用户输入起点、终端后默认生成一条导航路线，需要设置途径点来合理规划地图线路，并且需要对每个途径点进行车速限制。
\n<script type=\"text/javascript\">\n var map, route, marker;\n //基本地图加载\n map = new AMap.Map(\"container\", {\n resizeEnable: true\n });\n //绘制初始路径\n var path = [];\n path.push([116.303843, 39.983412]);\n path.push([116.321354, 39.896436]);\n path.push([116.407012, 39.992093]);\n map.plugin(\"AMap.DragRoute\", function() {\n route = new AMap.DragRoute(map, path, AMap.DrivingPolicy.LEAST_FEE); //构造拖拽导航类\n route.search(); //查询导航路径并开启拖拽导航\n });\n</script>\n官方的demo相当给力，几行代码就实现了可自由拖拽的功能，第一反应就用这个了，基本功能也能满足。
\n官方实现效果如下：
\n![\"实现效果\"](\"/img/拖拽生成网点图片.jpg\")
在实现点击途经点设置限速的时候，居然发现官方没有给这些生成的途径点提供回调方法，有点儿坑。
\n设置途经点点击方法
\n// 通过官方的mousemove方法来实时获取当前鼠标在地图上的位置\ntriggerClick() {\n const that = this\n that.map.on('mousemove', function(ev) {\n \tvar lnglat = ev.lnglat\n \tthat.currentLngLat = lnglat // 将经纬度信息保存下来\n\t})\n},\naddMarkerClick() { // 定义点击方法\n const that = this\n var infoWindow = new that.AMap.InfoWindow({\n offset: new that.AMap.Pixel(0, -20)\n })\n // 拿到地图上的marker 点\n\n setTimeout(() => {\n var dom = document.getElementById('container').getElementsByClassName('amap-marker') // 获取地图上所有途径点的dom\n dom = Array.from(dom).filter((item) => {\n if (item.style.display !== 'none') {\n return item\n }\n })\n dom.forEach((item, index) => { // 遍历dom\n const img = item.getElementsByTagName('img')[0]\n if (img) {\n img.onclick = (e) => { // marker 点击事件\n const list = [ // 经纬度数组格式数据\n that.currentLngLat.lng,\n that.currentLngLat.lat\n ]\n const distanceList = this.mapData.waypoints.map(item => { // 获取每个途经点到当前点距离list\n const p = [item.lng, item.lat]\n return that.AMap.GeometryUtil.distance(list, p)\n })\n const min = Math.min.apply(null, distanceList) // 拿到距离当前位置最近的点\n const index = distanceList.indexOf(min) // 获取索引\n const currentPoint = this.mapData.waypoints[index] // 获取触发点击途经点的经纬度数据\n const LngLat = new that.AMap.LngLat(currentPoint.lng, currentPoint.lat)\n infoWindow.setMap(that.map)\n // 设置marker信息展示内容\n const speedLimit = currentPoint.speedLimit ? currentPoint.speedLimit + 'KM' : '未设置'\n infoWindow.setContent(\n '<b>报警信息 </b> <br/><br/>' +\n '<b> 限速： </b> <span class=\"speed-input\">' + speedLimit + '</span><br/><br/>' +\n `<button id=\"closeBtn\" type=\"button\" class=\"el-button el-button--small\" \"><span>关闭</span></button> <button id=\"editBtn\" type=\"button\" class=\"el-button el-button--primary el-button--small\"><span>设 置</span></button>`\n )\n infoWindow.open(that.map, LngLat) // 打开弹窗消息\n setTimeout(() => {\n document.getElementById('closeBtn').onclick = () => {\n infoWindow.close()\n }\n document.getElementById('editBtn').onclick = () => {\n that.limitSet(index)\n }\n }, 500)\n }\n }\n })\n }, 500)\n }\n到这里之后 基本能完成想要的效果了。
\n![\"拖拽生成点效果\"](\"/img/拖拽生成点效果.jpg\")
但是由于官方api的限制，当我大于十六个网点后出现了这种情况。
\n![\"大于十六个点\"](\"/img/大于十六个点.jpg\")
超过十六个点后，前面的点就没有在线路规划的范围内了，这样肯定是不行的。
\n由于时间关系，先把最终完成的效果展示一下，具体实现方法下次完善。
\n![\"最终效果\"](\"/img/最终效果图.png\")
今天花了点时间将地图demo整理了出来，基本功能发出来了，具体的业务逻辑大家根据自己的需求做调整。\ngithub源码地址\n基本交互\n![\"拖拽生成点效果\"](\"/img/gitmap-1.png\")
\n路线详情展示\n![\"拖拽生成点效果\"](\"/img/gitmap-2.png\")