谷歌地圖V3默認控件的位置偏移

Question

我想谷歌地圖V3默認控件的位置是「上，左」，但我希望它留300像素。我還沒有找到如何使用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。

在這裏，我抓住它有什麼獨特之處，一把抓住DOM中的獨特元素和冒泡返回到主控制器DIV控制DIV包裝。然後用一個自定義的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/