Google 地图 v3 默认控制位置偏移

Question

我希望 Google 地图 v3 默认控件位置为“顶部，左侧”，但我希望它保留 300 像素。我还没有找到如何使用 API 来做到这一点，是吗？我想我可能只需要抓住 div 并用原始 javascript/jQuery 制作它。

提前致谢！

Answer 1

有一个更简单的解决方案。我从以下功能请求的描述中得到了这个想法 允许使用像素精确控制位置（您可以投票）。这是实现：

JavaScript:

var emptyDiv = document.createElement('div');
emptyDiv.className = 'empty';
emptyDiv.index = 0;
map.controls[google.maps.ControlPosition.TOP_LEFT].push(emptyDiv);

CSS:

.empty {
    width: 300px;
}

这是它的 JSFiddle 。

Answer 2

这可能并不理想，但我解决这个问题的方法是使用 jQuery。

在这里，我通过抓取 DOM 中的唯一元素并冒泡回主控制器 div 来获取没有任何独特之处的控件 div 包装器。然后我用一个自定义 div 包装它，保存该 div 的引用以供以后使用。最初我只是移动了控件 div 包装器，但它在悬停时移回到 left: 0。使用自定义 div 和偏移来包装它效果很好，并且可以稍后使用新的 div 包装。

var $controls = {}, _loaded = false;
// define the control wrapper for use later, map hasn't loaded yet

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

    if(!_loaded){ _loaded = true;
    // only runs on first idle

        var control_move = setInterval(function(){
        // look for loaded controller

            var img = 'img[src="http://maps.gstatic.com/mapfiles/mapcontrols3d7.png"]';

            if($(img).size() == 5){
            // loaded controller found

                clearInterval(control_move);
                // stop looking for loaded controller

                $(img+':first').parent().parent().parent().parent()
                    .wrap('<div id="control-offset" style="position: absolute; left: 300px; top: 0; width: 78px; height: 340px; overflow: hidden; z-index: 1000;"/>');
                $controls = $('#control-offset');
                // I wrap the controller wrap and offset that so it doesn't jump around

            }

        }, 100);
        // looping every tenth of a second

    // more initial map load code

    }

    // more idle map code

});

繁荣。告诉我这是否有意义。

Answer 3

如果您想设置垂直上边距，使用 psxls 示例，只需使用它即可：

function initialize() {
    var options = { 
        zoom: 8, 
        center: new google.maps.LatLng(-34, 150),
        zoomControl: true,
        panControl: true,
        panControlOptions: {
            position: google.maps.ControlPosition.LEFT_TOP
        },
        zoomControl: true,
        zoomControlOptions: {
             style: google.maps.ZoomControlStyle.LARGE,
             position: google.maps.ControlPosition.LEFT_TOP
        }
    };
    map = new google.maps.Map(document.getElementById('map'), options);

    var emptyDiv = document.createElement('div');
    emptyDiv.className = 'map_controls';
    emptyDiv.index = 0;
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(emptyDiv);
}

google.maps.event.addDomListener(window, 'load', initialize);

http://jsfiddle .net/54LLm/19/