草庐IT

javascript - 全屏控制和维护 map 中心

coder 2024-07-15 原文

目前，如果我说一个中等大小的 Google map 显示端口(300 像素 x 300 像素)并启用全屏控制，我会将小 map View 置于特定区域的中心，例如……法国…… . 然后我点击全屏按钮将显示扩展到我的屏幕边缘(1920 像素 x 1080 像素)，法国被隐藏在我屏幕的左上角。

基本上，原始 300 像素 x 300 像素显示的左上角移动到我屏幕的左上角，世界地图的其余部分从原始缩放级别的那个 Angular 延伸。

有什么方法可以基本上只设置它，以便全屏显示打开时具有与原始显示相同的中心点，反之亦然，当全屏模式关闭时？

切换全屏按钮会触发事件或任何我可以将 setCenter 挂接到的事件吗？

最佳答案

我编写的代码有点奇怪，但效果很好:

<script>
    var map;
    var center = -1;
    var isFullScreen = false;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: 8,
            center: { lat: -34.397, lng: 150.644 }
        });
        center = { lat: map.getCenter().lat(), lng: map.getCenter().lng() };
        google.maps.event.addDomListener(map, 'bounds_changed', onBoundsChanged);
    }
    function onBoundsChanged() {
            var isFullHeight = $(map.getDiv()).children().eq(0).height() == window.innerHeight;
            var isFullWidth = $(map.getDiv()).children().eq(0).width() == window.innerWidth;
            if (isFullHeight && isFullWidth && !isFullScreen) {
                isFullScreen = true;
                map.setCenter(center);
                console.log('FULL');
            } else if (!isFullWidth||!isFullHeight){
                if (isFullScreen) {
                    map.setCenter(center);
                }
                isFullScreen = false;
                console.log('NOT-FULL');
            }
            center = { lat: map.getCenter().lat(), lng: map.getCenter().lng() };            
    }
</script>

我使用 bounds_changed 事件。

如果我检测到 map 处于全屏状态，我将 map 设置在我在先例事件中注意到的中心，并将 bool 值设置为 true。如果 map 不是全屏，我会检查 bool 值是否为真，这意味着在之前的事件中 map 是全屏的，所以我将 map 重新​​居中，然后检查 bool 值是否为假。在事件结束时，我将中心保留在下一个事件的变量中。

这一切都不是很清楚...

可以咨询this在 Stack Overflow 中发帖。

注意: 如果您在网络应用程序的所有页面中显示单个 map ，则此代码不起作用。我找不到消除此错误的方法。非常感谢您的建议，谢谢。

另请注意: 我的代码是受先前答案的启发。但是您可以找到相同的代码 here .请注意，这不是重复的答案。我在其中添加了我自己的部分代码。

如果您有任何问题或意见，请告诉我。

关于javascript - 全屏控制和维护 map 中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40259261/

javascriptmapsectionisFullScreengoogle-mapsgoogle-maps-api-3

有关javascript - 全屏控制和维护 map 中心的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. Ruby Readline 在向上箭头上使控制台崩溃 - 2

    当我在Rails控制台中按向上或向左箭头时，出现此错误:irb(main):001:0>/Users/me/.rvm/gems/ruby-2.0.0-p247/gems/rb-readline-0.4.2/lib/rbreadline.rb:4269:in`blockin_rl_dispatch_subseq':invalidbytesequenceinUTF-8(ArgumentError)我使用rvm来管理我的ruby​​安装。我正在使用=>ruby-2.0.0-p247[x86_64]我使用bundle来管理我的gem，并且我有rb-readline(0.4.2)(人们推荐的最少

  3. ruby-on-rails - 带 Spring 锁的 Rails 4 控制台 - 2

    我正在使用Ruby2.1.1和Rails4.1.0.rc1。当执行railsc时，它被锁定了。使用Ctrl-C停止，我得到以下错误日志:~/.rvm/gems/ruby-2.1.1/gems/spring-1.1.2/lib/spring/client/run.rb:47:in`gets':Interruptfrom~/.rvm/gems/ruby-2.1.1/gems/spring-1.1.2/lib/spring/client/run.rb:47:in`verify_server_version'from~/.rvm/gems/ruby-2.1.1/gems/spring-1.1.

  4. ruby-on-rails - openshift 上的 rails 控制台 - 2

    我将我的Rails应用程序部署到OpenShift，它运行良好，但我无法在生产服务器上运行“Rails控制台”。它给了我这个错误。我该如何解决这个问题？我尝试更新ruby​​gems，但它也给出了权限被拒绝的错误，我也无法做到。railsc错误:Warning:You'reusingRubygems1.8.24withSpring.UpgradetoatleastRubygems2.1.0andrun`gempristine--all`forbetterstartupperformance./opt/rh/ruby193/root/usr/share/rubygems/rubygems

  5. C51单片机——实现用独立按键控制LED亮灭（调用函数篇） - 2

    说在前面这部分我本来是合为一篇来写的，因为目的是一样的，都是通过独立按键来控制LED闪灭本质上是起到开关的作用，即调用函数和中断函数。但是写一篇太累了，我还是决定分为两篇写，这篇是调用函数篇。在本篇中你主要看到这些东西！！！1.调用函数的方法（主要讲语法和格式）2.独立按键如何控制LED亮灭3.程序中的一些细节（软件消抖等）1.调用函数的方法思路还是比较清晰地，就是通过按下按键来控制LED闪灭，即每按下一次，LED取反一次。重要的是，把按键与LED联系在一起。我打算用K1来作为开关，看了一下开发板原理图，K1连接的是单片机的P31口，当按下K1时，P31是与GND相连的，也就是说，当我按下去时

  6. ruby-on-rails - 在 Rails 控制台中使用 asset_path - 2

    在我的Character模型中，我添加了:字符.rbbefore_savedoself.profile_picture_url=asset_path('icon.png')end但是，对于数据库中已存在的所有角色，它们的profile_picture_url为nil。因此，我想进入控制台并遍历所有这些并进行设置。在我试过的控制台中:Character.find_eachdo|c|c.profile_picture_url=asset_path('icon.png')end但这给出了错误:NoMethodError:undefinedmethod`asset_path'formain:O

  7. ruby-on-rails - 带有 Pry 的 Rails 控制台 - 2

    当我进入Rails控制台时，我已将pry设置为加载代替irb。我找不到该页面或不记得如何将其恢复为默认行为，因为它似乎干扰了我的Rubymine调试器。有什么建议吗？ 最佳答案 我刚发现问题，pry-railsgem。忘记了它的目的是让“railsconsole”打开pry。 关于ruby-on-rails-带有Pry的Rails控制台，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/question

  8. ruby - 将全局 $stdout 重新分配给控制台 - ruby - 2

    我正在尝试将$stdout设置为临时写入一个文件，然后返回到一个文件。test.rb:old_stdout=$stdout$stdout.reopen("mytestfile.out",'w+')puts"thisgoesinmytestfile"$stdout=old_stdoutputs"thisshouldbeontheconsole"$stdout.reopen("mytestfile1.out",'w+')puts"thisgoesinmytestfile1:"$stdout=old_stdoutputs"thisshouldbebackontheconsole"这是输出。r

  9. 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发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  10. ruby-on-rails - Ruby 流量控制 : throw an exception, 返回 nil 还是让它失败？ - 2

    我在思考流量控制的最佳实践。我应该走哪条路？1)不要检查任何东西并让程序失败(更清晰的代码，自然的错误消息):defself.fetch(feed_id)feed=Feed.find(feed_id)feed.fetchend2)通过返回nil静默失败(但是，“CleanCode”说，你永远不应该返回null):defself.fetch(feed_id)returnunlessfeed_idfeed=Feed.find(feed_id)returnunlessfeedfeed.fetchend3)抛出异常(因为不按id查找feed是异常的):defself.fetch(feed_id

随机推荐