添加填充到谷歌地图bounds.contains()

2024-04-12

我有一个侧边栏,显示谷歌地图当前地图视图中的标记名称。侧边栏内容随着地图的移动而变化:

google.maps.event.addListener(map, 'bounds_changed', function() {
            document.getElementById("list").innerHTML = "";
            var mklen = mkrs.length,
                a = 0,
                bnds = map.getBounds();

            for (a; a < mklen; a++) {
                var themk = mkrs[a];
                if (bnds.contains(themk.getPosition())) {
                    var myli = document.createElement("li");
                    myli.innerHTML = themk.title;
                    document.getElementById("list").appendChild(myli);
                }
            }
        });

这工作正常,但问题是,bounds.contains() 非常严格 - 如果标记的底部尖端位于地图上(即,您看不到它的 99%),它就会列在侧边栏上。我想要的是让完全显示的标记通过该测试。

我能想到几种方法,我不敢相信没有其他人遇到过这个问题,所以我想知道是否有以下几种方法:

  1. 获取边界并重新计算它们以使其小于实际边界,然后将这些新边界用于bounds.contains() 测试
  2. 计算标记图标的边缘在哪里(我猜使用fromDivPixelToLatLng)然后检查 ne 和 sw 角是否都在边界内,如果是,则列出该项目

在你问之前,我还没有尝试过其中任何一个 - 我更多地寻求关于哪一个最好甚至可能的建议,或者是否有其他方法可以做到这一点。这是一个fiddle https://jsfiddle.net/xelawho/e280jbte/2/演示这个问题,以防它澄清


万一后来有人发现这一点,我最终重新计算了界限——这似乎是开销最小的方法。这是函数:

function paddedBounds(npad, spad, epad, wpad) {
    var SW = map.getBounds().getSouthWest();
    var NE = map.getBounds().getNorthEast();
    var topRight = map.getProjection().fromLatLngToPoint(NE);
    var bottomLeft = map.getProjection().fromLatLngToPoint(SW);
    var scale = Math.pow(2, map.getZoom());

    var SWtopoint = map.getProjection().fromLatLngToPoint(SW);
    var SWpoint = new google.maps.Point(((SWtopoint.x - bottomLeft.x) * scale) + wpad, ((SWtopoint.y - topRight.y) * scale) - spad);
    var SWworld = new google.maps.Point(SWpoint.x / scale + bottomLeft.x, SWpoint.y / scale + topRight.y);
    var pt1 = map.getProjection().fromPointToLatLng(SWworld);

    var NEtopoint = map.getProjection().fromLatLngToPoint(NE);
    var NEpoint = new google.maps.Point(((NEtopoint.x - bottomLeft.x) * scale) - epad, ((NEtopoint.y - topRight.y) * scale) + npad);
    var NEworld = new google.maps.Point(NEpoint.x / scale + bottomLeft.x, NEpoint.y / scale + topRight.y);
    var pt2 = map.getProjection().fromPointToLatLng(NEworld);

    return new google.maps.LatLngBounds(pt1, pt2);
}

你这样称呼它:

var padbnds = paddedBounds(50, 70, 100, 30);

指定地图的北边、南边、东边和西边分别需要多少内边距

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

添加填充到谷歌地图bounds.contains() 的相关文章

  • 在 Google 表格脚本中设置活动单元格的值

    我想创建一个公式 在某个单元格更改上创建时间戳 下面的代码就可以了 我现在想做的是将公式转换为纯文本 将该时间戳锚定到工作表上 如果您手动执行此操作 您将选择时间戳 复制它们并将它们粘贴为值 我不想手动执行此操作 因此我创建了下面的脚本 它
  • libxmljs 的替代品 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 目标 使用 Node js 访问网页 使用 xpath 语法操作 DOM 并打印新的 DOM libxm
  • 在其他不可滚动的 div 上滚动时如何滚动可滚动的 div?

    我知道这个问题听起来很令人困惑 但这就是我想要做的 在下面的代码片段中 如果用户在绿色 div 上滚动 我希望黄色 div 相应地滚动 就像滚动黄色 div 一样 请注意 黄色 div 有overflow auto 但绿色的则不然 docu
  • Crypto-Js 库的 hmac-256 脚本返回函数结构而不是 Google Apps 脚本中的值,在外部工作正常吗?

    我正在设置一个谷歌电子表格项目来连接到我的 CryptoExchange API 但是当涉及到这个简单的 CryptoJs Hmac sha256 脚本时 它不起作用 它返回函数结构而不是值 而在外部它工作正常 看我的jsfiddle ht
  • 如何强制折断不可折断的字符串?

    我有一个根据数据库中包含的数据生成的 HTML 页面 数据库有时包含浏览器无法分解的长字符串 因为这些字符串不包含可分解的字符 空格 点 逗号等 有没有办法使用 html css 甚至 javascript 来解决这个问题 看到这个link
  • Sequelize - 使用 es6 和模块运行迁移

    我不确定我是否做错了什么或者什么 我觉得我正在运行一个现代的 相当常见的堆栈 但我无法让新的 Sequelize v6 与我的设置完美配合 我在 Node v14 17 Sequelize v6 6 2 上 在我的 package json
  • 使用命名的成功/错误回调在 AngularJS 中声明一个 Promise

    我正在尝试做一些与 http 服务非常相似的事情 根据我的理解 http 返回一个 Promise 对象 使用它时 语法是 http success function data success callback error function
  • 递归修剪对象中所有元素的更好方法?

    如果我有一个像这样的物体 const obj field subfield innerObj a asdasd asdas innerArr s ssad innerArrObj b adsad 我想出了这样的东西 const trimFi
  • 在 setInterval / setTimeout 中使用变量作为时间[重复]

    这个问题在这里已经有答案了 这是一个示例情况 var count time 1000 setInterval function count 1 time 上面的代码会将 count 变量加 1 即 1000 毫秒 看来 setInterva
  • JavaScript:常量属性

    在javascript中 我可以将对象的属性声明为常量吗 这是一个示例对象 var XU Cc Components classes or function aXU this Cc Components classes var XU new
  • ReactCSSTransitionGroup 组件WillLeave 未调用

    我尝试使用 ReactCssTransition 但不知何故该事件没有被调用 componentWillLeave 这是我的组件 import React Component from react import TransitionGrou
  • 带有 mkdocs 的本地 mathjax

    我想在无法访问互联网的计算机上使用 MathJax 和 Mkdocs 因此我不能只调用 Mathjax CDN Config mkdocs yml site name My Docs extra javascript javascripts
  • 类型“void”不可分配给类型“((event:MouseEvent) => void) |不明确的'

    import as React from react import App css import PageTwo from components PageTwo export interface IPropsk data Array
  • 将 window.location 传递给 Flask url_for

    我正在使用 python 在我的页面上 当匿名用户转到登录页面时 我想将一个变量传递到后端 以便它指示用户来自哪里 发送 URL 因此 当用户单击此锚链接时 a href Sign in a 我想发送用户当前所在页面的当前 URL
  • 有没有办法伪造同步 XHR 请求?

    我正在使用 Emscripten 系统将一堆 C 代码移植到 Javascript C 代码有很多调用fopen这是一个同步 IO 调用 在 Emscripten 中 我们使用对本地资源的 XHR 请求来模拟这一点however 在 Fir
  • 尝试使用 Firebug 查找 JavaScript 文件中的函数

    我试图找到这个函数调用 myFooBar 该函数在某些 HTML 中内联引用 但页面加载了大量 JavaScript 并且在每个文件中搜索该函数需要相当多的工作 如何使用 Firebug 找到此函数所在的 JavaScript 文件 打开脚
  • JavaScript 中的实时摩尔斯电码转换器

    在看到谷歌关于莫尔斯电码 gmail 的愚人节笑话后 我想我应该尝试用 javascript 创建一个实时莫尔斯电码转换器 我正在使用正则表达式和替换将莫尔斯电码更改为字符 例如 replace g a replace g r 我遇到的问题
  • Javascript onload 不起作用[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我正在使用
  • DOM 解析器 Chrome 扩展内存泄漏

    问题 我开发了一个扩展程序 可以拦截 Web 请求 获取 Web 请求来源的 HTML 并对其进行处理 我使用 DOMParser 来解析 HTML 并且意识到 DOMParser 正在导致大量内存泄漏问题 最终导致 chrome 扩展崩溃
  • 用javascript调用外部网页(跨域)

    我正在尝试使用以下网络服务来验证提要这个问题 https stackoverflow com questions 11996430 check if a url is a valid feed 但浏览器不允许我向另一台服务器发送 ajax

随机推荐

  • 如何从Python中的给定文本创建一组类及其变量和方法

    我想从给定的文本配置创建一组类 其变量和方法 特别是使用 django 模型 例如 我有一个要在 models py 中创建的模型列表 classes users posts commnets vars a b bb vv aa metho
  • Spring MVC 静态资源位于单独的 jar 中

    最近 我的同事问我是否可以将静态资源 css 图像 js 放在单独的 jar 文件中 并从 spring mvc 应用程序访问这些静态资源 我在谷歌上搜索 但没有发现任何有趣的东西 所以我的问题是 可能吗 如果是的话 您能解释一下该由谁来做
  • 复杂的 php mysqli 查询插入数据(如果不存在):获取重复列名“?”

    所以 伙计们 请查看我的示例代码 并帮助我 我找不到解决方案 在我传递 等参数的行上不断出现重复的列名称 我在查询中一起传递了 7 个变量 知道可能是什么问题吗 SQL INSERT INTO wifi ssid password name
  • 键入时更新文本框

    在 Access 中 我有一个包含三个文本框的表单 我正在尝试更新一个名为的文本框tbx组合名称两者的组合 textbox tbx姓氏 人的姓氏 textbox tbx名字 人的名字 我的问题是 我使用什么文本框属性 以便在输入文本时tbx
  • 检查开关参数的正确方法是什么

    检查开关值的正确方法是什么 function testSwitch Param switch swth Write Host Value of swth is swth if swth IsPresent Write host Switch
  • 从证书 x509 中提取公钥

    我正在寻找一种从 JavaScript 中的证书 x509 PEM 格式 中提取公钥的方法 如下所示 openssl x509 in cert cer pubkey noout gt pub txt 您需要能够解析 ASN 1 结构的东西
  • decltype中的成员函数调用

    以下代码 struct A int f int auto g int x gt decltype f x 无法编译并出现错误 error cannot call member function int B f int without obj
  • 如何在手机SD卡或其他位置搜索文件

    我想搜索用户移动设备上具有特定扩展名的文件 我尝试搜索但找不到任何直接的 API 是否有特定的 API 或者是否有实现相同目的的繁琐方法 或者是否有一种机制可以调用 linux 调用 find 或类似的东西 Thanks boolean i
  • 使用 Flask 代理到另一个 Web 服务

    我想将对 Flask 应用程序发出的请求代理到计算机上本地运行的另一个 Web 服务 我宁愿使用 Flask 而不是更高级别的 nginx 实例 这样我们就可以重用应用程序中内置的现有身份验证系统 我们越能保持这种 单点登录 越好 是否有现
  • 我可以改变传递给 setState 函数的状态吗?

    我知道我不应该直接在 React 中改变状态 但是当我使用函数时情况如何 onSocialClick e gt const id e target value this setState prevState props gt prevSta
  • 以编程方式在 WooCommerce 中创建多个优惠券

    我一直在寻找一种向 WooCommerce 批量添加优惠券的方法 它实际上是一个包含 800 个会员号码的列表 可以提供折扣 而优惠券似乎是实现此目的的最佳方式 我找到了一种以编程方式添加单张优惠券的方法 http docs woothem
  • Pycharm的终端不会更改Project Interpreter处Python版本对应的Python版本

    我已经安装了 PyCharm 2016 3 并在 Windows 上安装了两个版本的 Python 3 5 2 和 2 7 9 我想使用这两个版本 因此我在 项目解释器 窗口中对其进行了配置 我选择的是3 5 2版本如下图 之后我打开Pyt
  • 在 Meteor 应用程序中使用 Disqus / reCaptcha

    我正在开发一个使用 Meteor 的应用程序 我正在尝试在我的其中一个表单上使用 reCaptcha 并在我的某些页面上使用 Disqus 评论系统 但问题是 当我运行流星服务器时 这些都没有被渲染 以下是我添加到模板中的示例 Disqus
  • 如何结合 websockets 和 http 来创建一个保持数据最新的 REST API? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我正在考虑使用 websockets 和 http 构建一个 REST API 其中我使用 websockets 告诉客户端新数据可用或直接向客
  • 根据连续值之间的差异将列表拆分为子列表

    我有一个值列表 其中每个值至少有一个 但通常是多个 连续值 且增量为 0 033 l 26 051 26 084 26 117 26 15 26 183 31 146 31 183 34 477 34 51 34 543 我想将此列表拆分为
  • Java事件派发线程讲解

    我最近开始学习和探索 Java 中 GUI 编程的基础知识 编程已经有一段时间了 我只做过后端工作或工作 因此我最接近的用户界面是命令控制台 我知道这很尴尬 我正在使用 Swing 据我所知 这意味着我也在使用 AWT 我的问题是基于这段代
  • MySQL SELECT 中的条件 SELECT

    Table id price is active 1 20 99 0 2 10 99 1 3 30 99 0 4 15 99 1 5 35 99 1 我试图选择 is active 等于 1 的所有行的 COUNT 所以我使用了这个简单的查
  • 如何在Python中的多类分类问题上获取每个类的SHAP值

    我有以下数据框 import pandas as pd import random import xgboost import shap foo pd DataFrame id 1 2 3 4 5 6 7 8 9 10 var1 rando
  • 在 .ts 文件中使用 ngx-translate

    我想在侧菜单标题中使用翻译 我读过本教程 https ionicthemes com tutorials about internationalize and localize your ionic2 app with ngtranslat
  • 添加填充到谷歌地图bounds.contains()

    我有一个侧边栏 显示谷歌地图当前地图视图中的标记名称 侧边栏内容随着地图的移动而变化 google maps event addListener map bounds changed function document getElement