Question

我希望Google Maps v3默认控制位置为“顶部，左侧”，但我希望将其保留为300px。我还没有找到如何使用API执行此操作，是吗？我想我可能只需要抓住div并用原始的javascript / jQuery创建它。

提前致谢！

Answer 1

有一个更简单的解决方案。我从以下功能请求Allow exact control position using pixels的描述中得到了这个想法（您可以为其投票）。这是实施：

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。

这里我抓住控制div包装器，它通过抓取DOM中的一个独特元素并冒泡回主控制器div而没有任何独特之处。然后我用自定义div包装它，其参考被保存以供以后使用。最初我只是移动了控制div包装器，但它向左移动：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/

Google Maps v3默认控制位置偏移

3 个答案: