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打开的,不延时,后续获取不到dom
      document.querySelector('.job-location-map.js-open-map').addEventListener('click', ()=>setTimeout(getBusLine,2000));

    // 递归查找包含指定元素的 iframe
    function 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 元素的 iframe
        let {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链接

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python中合并列表的五种方法!

在 Python 编程中&#xff0c;我们经常需要将两个或多个列表合并为一个。这个过程通常是为了数据处理或者进行更复杂的操作。 列表合并是一个将两个或多个列表的元素整合到一起的过程。Python 提供了多种方式来实现这一点&#xff0c;每种方式都有自己的应用场景。 一、使用 …

SpringBoot编写一个SpringTask定时任务的方法

1&#xff0c;在启动类上添加注解 EnableScheduling//开启定时任务调度 2&#xff0c; 任务&#xff08;方法&#xff09;上也要添加注解&#xff1a; Scheduled(cron " 0 * * * * ? ") //每分钟执行一次 域&#xff1a; 秒 分 时 日 月 周 &#xff08;年&#…

内网渗透-windows权限维持的方法

windows权限维持的方法 文章目录 windows权限维持的方法一、影子账户二、粘滞键后门三、logon scripts后门五、注册表自启动后门六、屏幕保护程序后门七、计划任务后门八、服务自启动后门九、黄金票据十、白银票据十二、bitsadmin十五、CLR劫持 一、影子账户 1.使用如下命令创…

微信小程序开发遇到的奇奇怪怪的问题

新建项目发现顶部栏标题不生效问题 开发者工具新建项目默认开启全局Skyline渲染引擎&#xff0c;因为Skyline不支持原生导航栏&#xff0c;所以就没显示原生导航栏了。 如果想用回原生导航栏&#xff0c;可以把app.json里面的 "renderer": "skyline", 去掉…

2D AI交互数字人:赋能文旅、金融、政务、教育行业数字化转型

AI交互数字人结合了语音合成、语音识别、语义理解、图像处理、机器翻译、虚拟形象驱动等多项AI核心技术&#xff0c;可以提供服务导览、业务咨询、语音互动交流、信息播报等智能服务。 其中&#xff0c;2D AI交互数字人是采集真人视频&#xff0c;通过AI训练&#xff0c;生成逼…

竞赛 基于CNN实现谣言检测 - python 深度学习 机器学习

文章目录 1 前言1.1 背景 2 数据集3 实现过程4 CNN网络实现5 模型训练部分6 模型评估7 预测结果8 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于CNN实现谣言检测 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&am…

ELFK日志分析系统之搭建ELF+Filebeaat+Zookeeper+Kafka

引言 结合前面所学 http://ELK日志分析系统 一、为什么要做日志分析平台 随着业务量的增长&#xff0c;每天业务服务器将会产生上亿条的日志&#xff0c;单个日志文件达几个GB&#xff0c;这时我们发现用Linux自带工具&#xff0c;cat grep awk 分析越来越力不从心了&#…

从0到1实现RPC | 11 丰富测试案例

测试案例主要针对服务消费者consumer&#xff0c;复杂逻辑都在consumer端。 常规int类型&#xff0c;返回User对象 参数类型转换&#xff0c;主要实现逻辑都在TypeUtils工具类中。 测试方法重载&#xff0c;同名方法&#xff0c;参数不同 方法签名的实现&#xff0c;主要逻辑…

RHCE--dns正反向解析小实验

一、准备工作 1.关闭防火墙 [rootserver ~]# setenforce 0 [rootserver ~]# systemctl stop firewalld 2.安装软件 [rootserver ~]# yum install bind -y 二、正向解析 服务端IP客户端IP网址192.168.203.128192.168.203.130www.openlab.com 服务端配置静态ip [root…

蓝桥杯嵌入式第十五届省赛真题题目

蓝桥杯昨天也考完了&#xff0c;大家可以看看题目 客观题题目 程序题题目

遥感卫星:探索地球的科技之旅

遥感卫星是人类探索地球、理解地球、保护地球的重要工具&#xff0c;其发展历程承载了人类对地球的探索与认知的历程。从最初的概念到如今的高科技应用&#xff0c;遥感卫星技术的发展见证了人类科技的不断进步与创新。 初心萌芽&#xff1a; 遥感卫星的发展始于20世纪中叶&…

AGV小车导航避障雷达SE-0533(CNS-LS05C)激光传感器RS232|RS485|CAN BUS连线说明

AGV小车导航避障雷达SE-0533(CNS-LS05C)激光传感器广泛应用到AGV小车&#xff0c;RGV小车&#xff0c;无人叉车、搬运机器人等领域。本文重点介绍AGV小车导航避障雷达SE-0533(CNS-LS05C)激光传感器RS232|RS485|CAN BUS连线说明。 一、线序定义 1、传感器线缆线序定义 SE-053…

【网络编程】高性能并发服务器源码剖析

hello &#xff01;大家好呀&#xff01; 欢迎大家来到我的网络编程系列之洪水网络攻击&#xff0c;在这篇文章中&#xff0c;你将会学习到在网络编程中如何搭建一个高性能的并发服务器&#xff0c;并且我会给出源码进行剖析&#xff0c;以及手绘UML图来帮助大家来理解&#xf…

【Vue】面试题

vue的组建通信方式 父子关系&#xff1a;props & $emit 、 $parent / $children 、 ref / $refs 、 插槽跨层级关系&#xff1a; provide & inject通用方案&#xff1a;Vuex 或 eventbus 插播&#xff1a;兄弟组建怎么通信&#xff1f; eventbusVuex通过中间件&…

【游戏开发之热更新技术】

游戏开发之热更新技术 热更新技术是指在不重新发布和安装应用的情况下&#xff0c;对已部署的应用程序进行更新和修补的技术。这种技术在现代软件开发中变得越来越重要&#xff0c;因为它能够为用户提供更加及时的服务和更好的体验。以下是一篇关于热更新技术的文章&#xff0…

HttpServletRequest/Response

HttpServletRequest 一些常用类的用法 package Demo;import javax.jws.WebService; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import ja…

【前端】es-drager 图片同比缩放 缩放比 只修改宽 只修改高

【前端】es-drager 图片同比缩放 缩放比 ES Drager 拖拽组件 (vangleer.github.io) 核心代码 //初始宽 let width ref(108)//初始高 let height ref(72)//以下两个变量 用来区分是单独的修改宽 还是高 或者是同比 //缩放开始时的宽 let oldWidth 0 //缩放开始时的高 let o…

蓝桥杯-可获得最小值

前缀和思想: #include<bits/stdc.h>using namespace std;long long n,k;const int N200010;long long a[N],sum[N];int main() {cin>>n>>k;for(int i1;i<n;i)cin>>a[i];sort(a1,a1n);for(int i1;i<n;i){sum[i]sum[i-1]a[i];}long long ans1e18;…

【第十四届蓝桥杯省赛题目】

选择题&#xff1a; 1.设只含根结点的二叉树高度为1&#xff0c;共有62个结点的完全二叉树的高度为&#xff1f; A.4 B.5 C.6 D.7 解析&#xff1a;高度为K的满二叉树 节点数为 2k-1 &#xff0c;如果K6 最多有63个节点 故答案为6 选C 2.C中&#xff0c;bool类型的变量占用字…

LeetCode-热题100:226. 翻转二叉树

题目描述 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a; root [4,2,7,1,3,6,9] 输出&#xff1a; [4,7,2,9,6,3,1] 示例 2&#xff1a; 输入&#xff1a; root [2,1,3] 输出&#xff1a; […