map-making 按键脚本

在制作geoguessr地图时,我们可以为map-making增加按键快捷功能,按1即可加入标签,2可加入二号标签,按空格可保存标签,按r键可以删除标签,按q键可以旋转地图180度

当前为 2023-10-24 提交的版本,查看 最新版本

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         map-making 按键脚本
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  在制作geoguessr地图时,我们可以为map-making增加按键快捷功能,按1即可加入标签,2可加入二号标签,按空格可保存标签,按r键可以删除标签,按q键可以旋转地图180度
// @author       yukejun
// @match        https://map-making.app/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';


    function simulateMouseEvents(element, eventName, coord) {
        let event = new MouseEvent(eventName, {
            view: window,
            bubbles: true,
            cancelable: true,
            clientX: coord.x,
            clientY: coord.y
        });
        element.dispatchEvent(event);
    }

    function rotateView() {
        // 获取 Google 地图的元素
        let mapElem = document.querySelector('.mapsConsumerUiSceneInternalCoreScene__root');

        if (!mapElem) return;

        let rect = mapElem.getBoundingClientRect();
        let centerX = rect.left + rect.width / 2;
        let centerY = rect.top + rect.height / 2;

        // 模拟鼠标按下事件
        simulateMouseEvents(mapElem, "mousedown", {x: centerX, y: centerY});

        // 模拟拖拽效果
        let steps = 5;
        let distancePerStep = 220;

        function simulateStep(i) {
            if (i < steps) {
                simulateMouseEvents(mapElem, "mousemove", {x: centerX + i * distancePerStep, y: centerY});
                setTimeout(() => simulateStep(i + 1), 10);  // 添加10毫秒的延迟
            } else {
                // 模拟鼠标释放事件
                simulateMouseEvents(mapElem, "mouseup", {x: centerX + steps * distancePerStep, y: centerY});
            }
        }

        simulateStep(0);
    }


        // 定义选择器与按键的映射关系
    const SELECTORS = {
        '1': '[id^="downshift-"][id$="-item-0"]',
        '2': '[id^="downshift-"][id$="-item-1"]',  // 使用属性选择器,匹配以 "downshift-" 开头并以 "-item-1" 结尾的 id
        '3': '[id^="downshift-"][id$="-item-2"]',
        '4': '[id^="downshift-"][id$="-item-3"]',
         ' ': 'button.button.button--primary[type="button"]', // 按下空格键
         'e': 'button.tag__button.tag__button--delete[type="button"]', // 按下e键
        'r': 'button.button.button--destructive[type="button"]'  //按下删除
    };

    // 尝试点击给定选择器
    function tryClicking(selector) {
        let elem = document.querySelector(selector);
        if (elem) {
            elem.click();
        }
    }
// 监听键盘事件
document.addEventListener('keydown', event => {
    // 如果按键对应于 SELECTORS 中的选择器,则尝试点击
    if (SELECTORS[event.key]) {
        tryClicking(SELECTORS[event.key]);
    }

    // 如果按键是 'q',则尝试旋转视图
    if (event.key === 'q') {
        rotateView();
    }
    });

})();