Google 隐藏时映射 returns 相同的坐标

Question

我在屏幕右侧有一张 google 地图，在左侧有类似 airbnb 的房源列表。当用户移动 google 地图时，列表会用 AJAX 请求刷新。

我想在小屏幕设备上隐藏 google 地图。但是当我隐藏 google 地图时，奇怪的是，它仍然是 returns 边界（应该 return 0 因为没有地图）但是 map.getBounds().getSouthWest().lat() 和 map.getBounds().getNorthEast().lat() 相同， map.getBounds().getSouthWest().lng() 和 map.getBounds().getNorthEast().lng().

我不明白为什么 lat 和 lng 值相等。

这是我的边界调用；

...
    new google.maps.event.addListener(map, 'idle', function(){

                    params = get_bounds();

                    request_listings( extra_params );

                    console.log(params);



                });



                /*
                *Utility function: To get the bounds of the map
                */
                function get_bounds(){

                    return {

                        sw_lat : map.getBounds().getSouthWest().lat(),

                        sw_lng : map.getBounds().getSouthWest().lng(),

                        ne_lat : map.getBounds().getNorthEast().lat(),

                        ne_lng : map.getBounds().getNorthEast().lng()



                    }; 
...

它记录到控制台；地图不可见

Object {sw_lat: 40.983198400000006, sw_lng: 28.853608399999985, ne_lat: 40.983198400000006, ne_lng: 28.853608399999985}

这是地图可见的时候；

Object {sw_lat: 40.802046203851475, sw_lng: 28.853608399999985, ne_lat: 40.983198400000006, ne_lng: 29.196244508398422}

比较，

sw_lng 两种情况相同，ne_lat 相同 with/without 地图。所以我得到了这些值，但为什么不是其他值，或者为什么我在地图不可见时得到值。

谢谢

Answer 1

听起来您只是隐藏了地图 div 设置 display: none; 或等效设置。在这种情况下，地图仍然存在于 DOM 中，只是不可见，这就是为什么您仍然能够获得它的边界。

我实际上不确定地图是否可以没有边界存在，我建议更改您在其中使用这些边界的任何代码，以检查可见性而不是地图而不是 0 边界。

如果您真的希望地图没有边界（或尽可能小的边界），您可以尝试将 div 缩小到 width: 0px; height: 0px;（或者 1px）并且然后触发一个 google.maps.event.trigger(map, 'resize'); 事件来调整地图的大小以适合一个超小的盒子。

Google 隐藏时映射 returns 相同的坐标

Google maps returns same coordinates when hidden

javascript

google-maps

google-maps-api-3

bounds