Question

我有一个100％ - 100％的地图画布和绝对定位的div来显示我的控件。

我添加多个折线和标记以进行贴图，然后使用fitBounds。

我需要一种方法来修改地图，这样我的左侧450px div就不会与任何路径重叠。

通过搜索我发现我需要修改边界。 How to make fitBounds aware of custom controls 说

        var widthOfPanel = 450;
        var degreesPerPx = (360 / (Math.pow(2,z))) / 256;
        var degreesForPanel = degreesPerPx * widthOfPanel;

此时我知道我需要转移多少但是，

        var southwest = map_api.getBounds().getSouthWest();
        var northeast = map_api.getBounds().getNorthEast();

        var swNew = new google.maps.LatLng( southwest.lat(),
                                            southwest.lng() -  degreesForPanel); 

        var bounds = new google.maps.LatLngBounds(swNew, northeast);
        map_api.fitBounds(bounds);

无法正常工作。即使设置相同的值（degreesForPanel = 0）也会使地图缩小;

Answer 1

getBounds和fitBounds函数不能像我想象的那样工作。这是我的解决方案：

像往常一样添加点到边界。同时跟踪最外层单独坐标。
在fitBounds之后计算缩放级别并执行数学魔术以将像素转换为该缩放级别的度数。
通过将deggres添加到您跟踪的最左侧点来创建一个到边界（而不是地图）的新点。
用额外的点回顾fitBounds。

INIT：

mycanvas.map_bounds = new google.maps.LatLngBounds();

添加积分：

mycanvas.map_bounds.extend(point); // the usual way
mycanvas.extend(point); // to keep track of minimum maximum points

设置界限：

mycanvas.fit();

这是我的简化代码：

mycanvas = {
    offset : 450, // pixel width from left
    minlat : null, maxlat : null, minlng : null, maxlng : null, map_bounds : null,
    extend : function(point){
                var lat = point.lat();
                var lng = point.lng();
                mycanvas.minlat = mycanvas.minlat === null ? lat : Math.min(lat,mycanvas.minlat);
                mycanvas.maxlat = mycanvas.maxlat === null ? lat : Math.max(lat,mycanvas.maxlat);
                mycanvas.minlng = mycanvas.minlng === null ? lng : Math.min(lng,mycanvas.minlng);
                mycanvas.maxlng = mycanvas.maxlng === null ? lng : Math.max(lng,mycanvas.maxlng);
    },
    fit: function(){
            map_api.fitBounds(mycanvas.map_bounds); // required to get zoom level for the next line.

            var degrees_for_panel = mycanvas.offset * ( (360 / (Math.pow(2, map_api.getZoom()))) / 256 );
            var point_for_left = new google.maps.LatLng(mycanvas.minlat, mycanvas.minlng - degrees_for_panel);
            mycanvas.map_bounds.extend(point_for_left);

            map_api.fitBounds(mycanvas.map_bounds);

        },


}

希望对某人有帮助

Google Maps API修改边界以腾出空间来控制Div

1 个答案: