Google 地图：计算 div 叠加层未覆盖的位置

Question

以下情况：

• 我的 google 地图 div 占据了整个屏幕（100% 宽度和高度）
• 一个按钮可切换占据地图右侧的 div 叠加层（边栏）的可见性
• 地图上的标记可以隐藏在白色叠加层下方
• 为了避免标记被隐藏，我想将地图向右移动，以便标记在框左侧黄色区域的中心可见
• 页面基于bootstrap+angular

碰撞复选框与标记不是问题，但我无法让它相应地移动地图。

这是我试过的：

google.maps.event.addListenerOnce($scope.map, "projection_changed", function() {
    $scope.projection = $scope.map.getProjection();
});

var sidebar = document.getElementById('sidebar');
var rect = sidebar.getBoundingClientRect();

var marker = $scope.mainmarker.getPosition();
marker = $scope.projection.fromLatLngToPoint(marker); 
marker.x = rect.left / 2;
marker = $scope.projection.fromPointToLatLng(marker);
$scope.map.setCenter(marker);

但据我所见，地图移动得太远了。

Answer 1

我选择了这个对我来说效果很好的解决方案：

   if (underneath === true) {
        var marker = $scope.mainmarker.getPosition();
        var pixelpoint = $scope.projection.fromLatLngToPoint(point);
        pixelpoint.x += 250 / Math.pow(2, $scope.map.getZoom());
        point = $scope.projection.fromPointToLatLng(pixelpoint);
        $scope.map.setCenter(point);
    }