javascript - 在不移动 map 的情况下增加 map 容器大小的宽度

原文 标签 javascript jquery google-maps-api-3

我的项目中有一个 map View 页面,其中包含谷歌地图。在我的完整 View 中, map 容器占用侧容器的 70%(宽度)和 30%(宽度),这是与 map 标记对应的 ListView 。侧容器具有右上角的箭头按钮,每当我单击该按钮时,侧面容器应隐藏, map 容器应以全 View 显示(从 70% 到 100%)不移动 map .

最佳答案

你需要采取三个步骤。

  • 使用 JavaScript 调整 map 容器的大小
  • 计算 map 中心的像素偏移并将其应用于 map
  • 触发调整大小事件以加载
  • 之前未显示的图 block

    下面是一个工作示例(在 JSFiddle 上实时查看)。

    HTML
    <div id="map"></div>
    <button id="toggle">Toggle</button>
    

    CSS
    #map {
        width: 70%;
        height: ...
    }
    

    JavaScript
    var state = 0;
    
    $(document).ready(function() {
        var map = new google.maps.Map(document.getElementById('map'), {
            center: new google.maps.LatLng(52.5167, 13.3833),
            zoom:   11
        });
    
        $('#toggle').click(function() {
            var width, offste;
    
            if ((state++ % 2) == 0) {
                width = 100;
                offset = $('#map').outerWidth() * (1.0 - 1.0 / 0.7) / 2.0 ;
            } else {
                width = 70;
                offset = $('#map').outerWidth() * (1.0 - 0.7) / 2.0 ;
            }
    
            $('#map').css('width', width + '%'); 
            map.panBy(offset, 0);
            google.maps.event.trigger(map, 'resize');
        });
    });
    

    请注意,您可能需要根据您的特定情况调整宽度和偏移量计算。

    关于javascript - 在不移动 map 的情况下增加 map 容器大小的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25903400/

    相关文章:

    javascript - 将字符串从HTML发送到jQuery时,jQuery在撇号后删除字符

    javascript - 在 Google Maps javascript API v3 中不断更新矩形边界非常慢

    javascript - 谷歌地图在一个标记中包含多个信息

    javascript - JavaScript对JavaScript变量的jQuery html()进行替换

    javascript - $('form')[0]的替代方法是什么?

    php - 如何为后退按钮保留 Web 表单内容

    javascript - TypeError:无法在以下位置设置未定义的属性“用户”

    javascript - 在两个单独的 HTML 元素上链接 'active' 状态

    javascript - 当 Google map 进入街景时,我可以锁定哪些事件?

    javascript - 我可以在运行时修改Javascript库吗?