午休好。今天三道一个高德官方给 npm 包、专治页面里多个组件抢着加载地图脚本的加载器一个在没装 Vue Devtools 时也能摸到组件实例的控制台小技巧以及一段关于同一个经纬度为什么对不上的冷知识。amap/amap-jsapi-loader把加载 JSAPI 这件事交给官方手工在 HTML 里塞script srchttps://webapi.amap.com/maps?v2.0key...是很常见的做法一旦组件化就开始出乱子两个组件各自判断if (!window.AMap)再插脚本异步竞争之下 AMap 可能有了但插件没装全更糟的是页面里同时混进 1.4 和 2.0 两个版本。高德开放平台其实提供了一个官方 npm 包来管这件事仓库名amap/amap-jsapi-loaderREADME 里自称高德官网提供的地图 JSAPI 的加载器。我本地装了一份看npmi amap/amap-jsapi-loader--save# 1.0.1MITdist/index.js 5268 字节importAMapLoaderfromamap/amap-jsapi-loader// 2021-12-02 之后申请的 key 必须配安全密钥官网文档要求写在前面window._AMapSecurityConfig{securityJsCode:你申请的安全密钥}AMapLoader.load({key:你的 Web 端开发者 Key,// 首次调用必填version:2.0,// 不写的话默认加载 1.4.15plugins:[AMap.Scale,AMap.ToolBar],}).then((AMap){constmapnewAMap.Map(container,{zoom:11})})它的index.d.ts里除了plugins还能顺手带上 AMapUI默认 1.1和 Loca默认 1.3.2AMapLoader.load({key:xxx,version:2.0,AMapUI:{version:1.1,plugins:[overlay/SimpleMarker]},Loca:{version:1.3.2},})值不值的看它 README 里那两条承诺就够了“允许多次执行加载操作网络资源不会重复请求便于大型工程模块管理”以及**“对于加载混用多个版本 JSAPI 的错误用法给予报错处理”**。前者意味着你可以在每个地图组件的mounted里各写一次load()由它去合并后者意味着版本混用会直接抛错而不是等你查半小时白屏。5KB 换一个加载时序不用自己管我觉得划算。小技巧el.__vue__从 DOM 节点直接拿到组件实例调试 Vue 2 组件时如果没装 Devtools 扩展或者线上环境根本没法装控制台里其实有个后门constvmdocument.querySelector(.map-wrapper).__vue__ vm.$data.center// 读vm.setZoomvm.setZoom(14)// 组件的 methods 直接挂在实例上能调这个属性不是猜的。Vue 2.7.16 的源码里就有赋值动作// update __vue__ reference注释下面一行vm.$el.__vue__vm;而且它写在渲染流程里不在 dev-only 分支里——生产构建vue.min.js中同样存在这一处赋值所以打包上线后照样能用。另外源码里还有一行销毁时清理的逻辑vm.$el.__vue__ null也就是组件beforeDestroy之后你手上那个引用就取不到新值了别把它当长期缓存。如果只知道组件name、不知道 DOM 类名可以从根实例递归找constfind(vm,name)vm.$options.namename?vm:vm.$children.reduce((hit,c)hit||find(c,name),null)find(document.querySelector(#app).__vue__,MapPanel)注意$children是只读的直接子组件数组官方 API 文档原话Read onlyThe direct child components of the current instance所以只有一层得靠递归往下钻。这个技巧用来干什么都最爽——验证我那个地图实例到底进 data 没有、“点了半天这个 ref 里存的是啥”比在模板里加一堆{{ }}快得多。冷知识为什么你手上的经纬度在高德底图上偏了一截前端做地图迟早会撞上一次 marker 落在马路对面。原因不在代码在坐标系WGS-84GPS 原始坐标系浏览器navigator.geolocation返回的就是它。GCJ-02俗称火星坐标系由 WGS-84 加密偏移而来国内公开发布的地图服务按监管要求必须做这层加密。高德、腾讯走的都是它。BD-09百度在 GCJ-02 之上又加密偏移了一次所以百度的坐标只有它自己认。偏移量级是几十到几百米所以拿 GPS 原始坐标直接当高德的 marker 点位一定会肉眼可见地偏——两套坐标系里同一个数字指向的不是同一个地点。中间必须过一次转换。顺带一个容易忽略的点地图上的距离、面积、围栏判定本质都建立在数据同源这个前提上。你从后端拿的门店坐标是 GCJ-02用户上传的签到点是 WGS-84混着算就会得到那种看起来没问题但客户投诉说画歪了的结果。最后今天这三件东西看着不相关其实都在处理同一类问题你看不见的那一层正在决定你算错的那一步。加载 JSAPI 时你不看的是脚本插入的时序和版本于是有时候地图能出来调试组件时你不看的是实例上真实挂着的 data于是靠加模板变量猜状态做地图时你不看的是坐标系于是同一个116.397在两套体系里差出一条街。这三层的共同解法也一致让隐性的变成显性的——加载交给会报错的工具状态从实例上直接读坐标系在代码注释里写死一行这里的数字是 GCJ-02。地图前端的 bug多数不是代码逻辑错是两个东西其实不同源却被当成同源。下次先问这个通常比 debug 快。