草庐IT

javascript - 从 Google map 视口(viewport)边界中排除重叠元素

coder 2024-07-15 原文

我正在使用 Google Maps API v3 在网站上创建内联 map 。在它的容器元素中，我还有一个绝对定位的叠加层，它显示了一些详细信息，视觉上悬停在 map 上。根据上下文确定该元素可能会增长到整个 map 元素的大小。

所有这些都工作正常，但是 Maps 实例当然仍然认为 map 的重叠部分是 map 的有效可用部分。这意味着，尤其是当叠加层处于最大高度时，setCenter 不会关注可见中心，并且使用 DirectionsRenderer 绘制的路线是部分位于覆盖层下方。

看这张图:

有没有办法将实际视口(viewport)限制在蓝色区域，以便setCenter以箭头尖端为中心，setBounds适合蓝色部分？

最佳答案

我目前已经设法实现了一个可接受的功能解决方法。

一些重要的注意事项:

  • 每个 Map 对象都有一个 Projection，可以将 LatLng 点转换为 map 点。
  • Projection 用于计算的 map 点位于“世界”坐标中，这意味着它们是缩放级别为 0 的世界地图上的像素。
  • 每个缩放级别都使显示的像素数恰好加倍。这意味着给定 map 点中的像素数等于 2 ^ zoom。

下面的示例假定右侧有一个 300 像素宽的侧边栏 - 适应其他边框应该很容易。

居中

利用这些知识，编写用于偏心居中的自定义函数变得微不足道:

function setCenter(latlng)
{
    var z = Math.pow(2, map.getZoom());
    var pnt = map.getProjection().fromLatLngToPoint(latlng);
    map.setCenter(map.getProjection().fromPointToLatLng(
                    new google.maps.Point(pnt.x + 150/z, pnt.y)));
}

这里的关键位是 z 变量，以及最后一行中的 pnt.x + 150/z 计算。由于上述假设，对于当前缩放级别，这会将点移动到左侧 150 像素的中心，并因此补偿右侧栏缺失的 300 像素。

边界

边界问题远非微不足道。这样做的原因是要正确偏移点，您需要知道缩放级别。对于重新居中，这不会改变，但为了适应以前未知的边界，它几乎总是会改变。由于 Google map 在适应边界时在内部使用未知边距，因此没有可靠的方法来预测所需的缩放级别。

因此，一个可能的解决方案是调用两步火箭。首先，对整个 map 调用 fitBounds。这应该使边界和缩放级别至少几乎正确。然后紧接着，第二次调用 fitBounds 更正侧边栏。

应使用 LatLngBounds 对象作为参数调用以下示例实现，或者没有参数以默认为当前边界。

function setBounds(bnd, cb)
{
    var prj = map.getProjection();
    if(!bnd) bnd = map.getBounds();
    var ne = prj.fromLatLngToPoint(bnd.getNorthEast()),
        sw = prj.fromLatLngToPoint(bnd.getSouthWest());
    if(cb) ne.x += (300 / Math.pow(2, map.getZoom()));
    else google.maps.event.addListenerOnce(map,'bounds_changed',
        function(){setBounds(bnd,1)});
    map.fitBounds(new google.maps.LatLngBounds(
        prj.fromPointToLatLng(sw), prj.fromPointToLatLng(ne)));
}

我们首先在这里做的是获取边界的实际点，由于未设置 cb，我们在 bounds_changed 上安装了一个一次性事件，它然后在 fitBounds 完成后触发。这意味着该函数会在缩放校正后自动第二次调用。第二次调用使用 cb=1，然后偏移框以针对 300 像素宽的边栏进行校正。

在某些情况下，这可能会导致轻微的动画异常，但在实践中，我只看到这种情况发生在真正垃圾点击按钮导致适合操作时。否则它运行得很好。

希望这对某人有帮助:)

关于javascript - 从 Google map 视口(viewport)边界中排除重叠元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21913116/

中排javascriptcodemapsectiongoogle-mapsgoogle-maps-api-3

有关javascript - 从 Google map 视口(viewport)边界中排除重叠元素的更多相关文章

  1. ruby - 在哈希的键数组中追加元素 - 2

    查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用

  2. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

  3. ruby - Hanami link_to 助手只呈现最后一个元素 - 2

    我是HanamiWorld的新人。我已经写了这段代码:moduleWeb::Views::HomeclassIndexincludeWeb::ViewincludeHanami::Helpers::HtmlHelperdeftitlehtml.headerdoh1'Testsearchengine',id:'title'hrdiv(id:'test')dolink_to('Home',"/",class:'mnu_orizontal')link_to('About',"/",class:'mnu_orizontal')endendendendend我在模板上调用了title方法。htm

  4. ruby - 将n维数组的每个元素乘以Ruby中的数字 - 2

    在Ruby中，是否有一种简单的方法可以将n维数组中的每个元素乘以一个数字？这样:[1,2,3,4,5].multiplied_by2==[2,4,6,8,10]和[[1,2,3],[1,2,3]].multiplied_by2==[[2,4,6],[2,4,6]]？(很明显，我编写了multiplied_by函数以区别于*，它似乎连接了数组的多个副本，不幸的是这不是我需要的)。谢谢! 最佳答案 它的长格式等价物是:[1,2,3,4,5].collect{|n|n*2}其实并没有那么复杂。你总是可以使你的multiply_by方法:c

  5. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  6. arrays - 计算数组中的匹配元素 - 2

    给定两个大小相等的数组，如何找到不考虑位置的匹配元素的数量？例如:[0,0,5]和[0,5,5]将返回2的匹配项，因为有一个0和一个5共同；[1,0,0,3]和[0,0,1,4]将返回3的匹配项，因为0有两场，1有一场；[1,2,2,3]和[1,2,3,4]将返回3的匹配项。我尝试了很多想法，但它们都变得相当粗糙和令人费解。我猜想有一些不错的Ruby习惯用法，或者可能是一个正则表达式，可以很好地回答这个解决方案。 最佳答案 您可以使用count完成它:a.count{|e|index=b.index(e)andb.delete_at

  7. ruby - 查找重叠的正则表达式匹配项 - 2

    我想找到给定字符串中的所有匹配项，包括重叠匹配项。我怎样才能实现它？#Example"a-b-c-d".???(/\w-\w/)#=>["a-b","b-c","c-d"]expected#Solutionwithoutoverlappedresults"a-b-c-d".scan(/\w-\w/)#=>["a-b","c-d"],but"b-c"ismissing 最佳答案 在积极的前瞻中使用捕获:"a-b-c-d".scan(/(?=(\w-\w))/).flatten#=>["a-b","b-c","c-d"]参见Rubyde

  8. ruby - 确定字符串的结尾是否与单独的字符串的开头重叠 - 2

    我想查找字符串的结尾是否与单独字符串的开头重叠。例如，如果我有这两个字符串:string_1='Peoplesaynothingisimpossible,butI'string_2='butIdonothingeveryday.'如何找到string_1末尾的“butI”部分与string_2开头相同？我可以编写一个方法来遍历这两个字符串，但我希望得到一个包含我错过的Ruby字符串方法或Ruby习惯用法的答案。 最佳答案 将MARKER设置为一些从未出现在您的string_1和string_2中的字符串。有一些方法可以动态地做到这一

  9. ruby - 使用 Nokogiri 和 Ruby 命名元素 "text" - 2

    我在尝试使用Nokogiri构建XML文档时遇到了一个小问题。我想将我的元素之一称为“文本”(请参阅​​下面粘贴代码的最底部)。通常，要创建一个新元素，我会执行类似以下的操作xml.text--但它似乎是.text是Nokogiri已经用来做其他事情的方法。因此，当我写这行时xml.textNokogiri没有创建名为的新元素但只是写了意味着成为元素内容的文本。我怎样才能让Nokogiri实际制作一个名为的元素？？builder=Nokogiri::XML::Builder.newdo|xml|xml.TEI("xmlns"=>"http://www.tei-c.org/ns/1.0"

  10. ruby - 在 factory_girl 中有没有办法获取 attributes_for 并为同一个实例元素创建？ - 2

    如果我想使用“create”构建策略创建和实例，然后想使用“attributes_for”构建策略进行验证，是否可以这样做？如果我在工厂中使用序列？在Machinistgem中有可能吗？ 最佳答案 不太确定我是否完全理解。而且我不是机械师的用户。但听起来您只是想做这样的事情。@attributes=FactoryGirl.attributes_for(:my_object)my_object=MyObject.create(@attributes)my_object.some_property.should==@attributes

随机推荐