js脚本解决因挂VPN导致boss上高德地图无法正常规划公交路线问题

情况说明:

最开始一直以为boss上的查询自己所在地点到面试地点的公交的功能有bug,总是规划路线失败,结果这个一调试,发现是自己的经纬度有问题导致的。

程序猿嘛,开机VPN必须是挂着的,这就导致了boss获取到了错误的经纬度,然后因为ip是国外的,自然就没法规划到路线了,要解决也很简单,把VPN关了就行。

不过这就不程序猿了,所以以下就是魔法手段了。使用油猴脚本,毕竟如果是用书签脚本,没开一个新页面都得执行一下脚本,这操作并不美丽,优雅。(书签脚本当然也行,不过这工作我就不做了)
注意:这个脚本并不是通用的,需要手动设置(hard code)一下自己的经纬度和城市(不是不能实现代码层面动态获取,但就得增加一堆代码,感觉这个bug其实还是比较少人会遇到,需求不大,偷懒不想干,而且本来就是拿来给自己用的,肯定够用就行)

这里代码的难点就难在如何去调用网站本身已有的方法,把修正后的经纬度传给规划公交路线的方法,让它生成正确的路线,但方法本身就是包含在一个个闭包内,并且一般也不会暴露出去,你自己写的脚本一般拿不到这些方法.

而普遍的做法可能就是脚本里要自己复制出一份网站的方法,然后在自己的脚本上下文里调用,这个工作量可够大了,而且未必能成功。当然这里并不需要这么麻烦

我的思考过程就是先看网络请求或者找到根据点击的方法,或者各种提示词先找到绘制公交路线的方法,就好比这里会有个无规划路线的提示语,
在这里插入图片描述

这就是很好的入口点,直接控制台全局搜索源码,
找到调用部分,各种折腾,然后发现地图的输入框输入地点后,点击位置可以成功绘制公交路线,然后找到对应方法断点调试,发现华点,打印this发现是vue实例对象(过程肯定没有这么简单),这就有趣了,vue2的组件实例是可以在dom对象身上获取得到的document.querySelector('xxx').__vue__
所以只要你找到正确的dom,就可以拿得到真正的this了,同样你也拿到了绘制公交路线的方法,剩下部分就easy了。
在这里插入图片描述

不过实际调试过程还是发现有另一个问题存在,因为地图部分是弹窗iframe,所以如果脚本直接运行,
试图找到this所在的dom,你会发现document.querySelector(‘xxx’)获取不到元素,但你明明看得到页面有这个dom(有时候你在控制台却可以打印出来,有时候又不行,这就是另一个知识点了——对于iframe,控制台底下是有top,iframe的层级可以选择的,层级对了,你就可以获取得到dom),
在这里插入图片描述

所以这里还得去遍历页面所有的iframe,找到正确的iframe,同时因为调用了高德地图的api,还要同时把高德的包给返回出去,不然到时候调用报没定义的错

// ==UserScript==
// @name         fix map proxy bug
// @author       You
// @match        https://www.zhipin.com/job_detail/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=zhipin.com
// @grant        none
// ==/UserScript==
(function() {'use strict';//需要自己hard code部分  let jwd = [113, 23];let city = '广州';//需要自己hard code部分//给地图加上点击事件监听,用来触发我们的脚本,需要延时执行,因为后续地图是用iframe打开的,不延时,后续获取不到domdocument.querySelector('.job-location-map.js-open-map').addEventListener('click', ()=>setTimeout(getBusLine,2000));// 递归查找包含指定元素的 iframefunction findIframeWithElement(element) {return new Promise((resolve,reject)=>{if (!element) {console.log('输入错误')reject('输入错误')}var iframes = document.querySelectorAll('iframe');let loop = setInterval(()=>{for (var i = 0; i < iframes.length; i++) {var iframeDoc = iframes[i].contentDocument || iframes[i].contentWindow.document;if(iframeDoc.readyState === 'complete' && iframeDoc.querySelector(element)){clearInterval(loop);loop = null;resolve({AMap:iframes[i].contentWindow.AMap,target:iframeDoc.querySelector(element)});}}},500)})}async function getBusLine(){// 查找包含 path-plan-search 元素的 iframelet {target, AMap} = await findIframeWithElement('.path-plan-search')// 如果找不到 target,则等待一段时间后再尝试,毕竟iframe可能没加载得那么快if (!target || !AMap) {setTimeout(getBusLine, 500);return;}//因为boss直聘的地图弹窗是用vue2做的,所以可以dom通过获取vue组件实例var that = target.__vue__;var n = new AMap.LngLat(...jwd);//这里也可能因为执行太快,拿不到坐标,所以继续轮询if(!that.endAddress.longitude){setTimeout(getBusLine, 500);return;}var a = new AMap.LngLat(that.endAddress.longitude, that.endAddress.latitude);that.$emit("on-plan", {planType: that.currentPlanType,startPoint: n,endPoint: a,startPointCity: city,endPointCity: (that.endAddress && that.endAddress.cityName)});}
})()

需要注意代码里有两个地方需要根据自己需求进行修改,一个是你自己的经纬度,这个可以在关闭VPN后在控制台输入下面的代码来获取

navigator.geolocation.getCurrentPosition(function(position) {console.log([position.coords.longitude,position.coords.latitude]);
})

一个是你的目标城市名
代码github链接

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/626438.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何节约上架时间,小程序管理平台推荐

继微信正式推出微信小程序后&#xff0c;各个大厂陆续发布了各自的小程序平台 —— 支付宝小程序、百度小程序、头条小程序&#xff0c;各家不同的小程序标准一度让开发者们激情开骂&#xff0c;虽然目前跨平台的小程序开发可以通过taro、mpvue、kbone等跨平台开发框架来解决&a…

JookDB下载安装使用

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

Android 纵向双选日历

这个日历的布局分两部分&#xff0c;一部分是显示星期几的LinearLayout&#xff0c;另外就是一个RecyclerView&#xff0c;负责纵向滚动了。 工具类&#xff1a; implementation com.blankj:utilcode:1.17.3上activity_calendar代码&#xff1a; <?xml version"1.0&…

Jmeter测试学习笔记

第一章 jmeter基础知识 一.Jmeter工具中的组件 1.测试计划&#xff1a;Jmeter测试的起点。容器。 2.线程组&#xff1a;代表一定的用户 3.取样器&#xff1a;发送请求的最小单元 4.逻辑控制器&#xff1a;处理请求逻辑 5.前置处理器&#xff1a;请求之前的操作 6.后置处…

vue3推荐算法

Vue 3 推荐算法主要指的是在 Vue 3 框架中实现的或者适用于 Vue 3 的算法库或组件库。Vue 3 由于其优秀的设计和性能&#xff0c;被广泛应用于构建各种类型的应用程序&#xff0c;包括需要复杂算法支持的项目。以下是一些在 Vue 3 中可能会用到的推荐算法资源&#xff1a; Vue-…

【leetcode】双指针算法技巧——滑动窗口

标题&#xff1a;【leetcode】双指针算法技巧——滑动窗口 水墨不写bug 正文开始&#xff1a; 滑动窗口介绍 滑动窗口是一种常用的算法技巧&#xff0c;用于解决一些涉及 连续子数组或子串 的问题。它的基本思想是 维护一个窗口&#xff0c;通过 在窗口内移动 来寻找满…

图灵奖得主AviWigderson:随机性与AI深度融合,引领计算科学新篇章

近日&#xff0c;理论计算机科学领域的杰出代表Avi Wigderson教授荣获了享有“计算机界诺贝尔奖”美誉的图灵奖&#xff0c;以表彰他对计算中随机性和伪随机性研究的杰出贡献。这一荣誉不仅彰显了Wigderson教授在计算理论领域的卓越成就&#xff0c;也为当前热门的AI和深度学习…

嵌入式中C++指针使用方法总结

各位开发者大家好,在分享指针之前,先来看一下int *p[3]和int (*p)[3] 的区别。 int *p[3] p是一个数组,此数组有3个元素,每个元素都是int*类型,也就是指向整型数据的指针类型。 int a=10,b=20,c=30; int*p[3]={&a,&b,&c}; 而int(*p)[3]中的p是一个指向数组的…

强强联手|AI赋能智能工业化,探索AI在工业领域的应用

随着人工智能&#xff08;AI&#xff09;技术的不断发展和应用&#xff0c;AI在各个领域展现出了巨大的潜力和价值。在工业领域&#xff0c;AI的应用也越来越受到关注。AI具备了丰富的功能和强大的性能&#xff0c;为工业领域的发展带来了巨大的机遇和挑战。 一站式软件外包、项…

python使用redis存储时序数据

import redisdef ts_demo():"""时序数据存储RedisTimeSeries测试"""# 连接到Redisr redis.Redis(hostlocalhost, password"xxxx", port63790, db0)r1 r.ts()# print(r1.get("ts_key"))# print(r.exists(ts_key))# # 清空键…

链动3+1模式相比传统商业模式有何优势?

链动31模式是一种创新的商业模式&#xff0c;它结合了身份机制、直推奖励和团队奖励等策略。该模式通过设定代理和老板两种身份&#xff0c;构建了一个清晰的裂变链条。用户可以通过推荐新用户加入来获得奖励&#xff0c;并实现身份的升级。 假设有一个电商平台采用了链动31模…

linux离线安装MySql

一、mysql离线安装包下载 地址&#xff1a;MySQL. 点击DOWNLOADS&#xff0c;点击下图链接 点击Community Server Select Version 版本下拉框选择有两个选择 8.3.0 Innovation 是创新版&#xff0c;8.0.36是稳定版本&#xff0c;选择8.0.36 Select Operating System 操作系…