如何將谷歌地圖不在屏幕中央？

我有一個基於谷歌地圖（使用gmap3）的網站，它上面有標記和浮動小部件，其中包含有關活動標記的文本。這個浮動小部件佔用大約一半的屏幕。地圖自動居中（或平移）到活動標記。如何將谷歌地圖不在屏幕中央？

正如你從上面看到的，屏幕中心的活動標記非常接近文本小部件的右側（它幾乎覆蓋了屏幕的所有左側）。我想讓它更鬆 - 比如說，不在屏幕中央，但是從左邊開始大約2/3，從右側開始大約1/3（橫向，當然，垂直方向應該保持居中）。

換句話說，我想要以下內容：當一個新的標記被選爲活動時，地圖應該平移到這樣的位置，這個標記約爲屏幕右側1/3的屏幕寬度。

更改地圖中心的緯度不會有幫助，因爲這可以在任何縮放級別上工作。我需要像「panTo（width：66％; height：50％）」（當然這不是真正的代碼）。

預先感謝您。

(  function($){ 
    var $et_main_map = $('#et_main_map'); 

    et_active_marker = null; 

    $et_main_map.gmap3({ 
     map:{ 
      options:{ 
<?php 
while (have_posts()) : the_post(); 
$et_location_lat = get_post_meta(get_the_ID(), '_et_listing_lat', true); 
$et_location_lng = get_post_meta(get_the_ID(), '_et_listing_lng', true); 

      if ('' != $et_location_lat && '' != $et_location_lng) 
       printf('center: [%s, %s],', $et_location_lat, $et_location_lng); 

break; 
endwhile; 
rewind_posts(); 
?> 

          zoom: <?php 
         if (is_home() || is_front_page()) 
          echo esc_js(et_get_option('explorable_homepage_zoom_level', 3)); 
         else 
          echo esc_js(et_get_option('explorable_default_zoom_level', 5)); ?>, 
       mapTypeId: google.maps.MapTypeId.<?php echo esc_js(strtoupper(et_get_option('explorable_map_type', 'Roadmap'))); ?>, 
       mapTypeControl: false, 
       mapTypeControlOptions: { 
        position : google.maps.ControlPosition.LEFT_CENTER, 
        style : google.maps.MapTypeControlStyle.DROPDOWN_MENU 
       }, 
       streetViewControlOptions: { 
        position: google.maps.ControlPosition.LEFT_CENTER 
       }, 
       navigationControl: true, 
       scrollwheel: false, 
       streetViewControl: false, 
       zoomControl: true, 
            zoomControlOptions: { 
        position: google.maps.ControlPosition.RIGHT_BOTTOM, 
              style: google.maps.ZoomControlStyle.SMALL 
       }, 
      } 
     } 
    });

來源

2013-10-06 yann

你可以使用CSS風格和位置獲取填充你知道的Google地圖的div - 請顯示代碼，html和填充地圖的javascript –

這不是我的代碼，真的 - 它是現成的WP我正在調整的主題。對於評論太長了 - 我會更新帖子。 – yann

您可以先在地圖中心，在給定的經緯度，然後用panBy()應用偏移：

map.panBy(-Math.floor(map.getDiv().offsetWidth/6),0)

對於gmap3您可以使用地圖選項的事件屬性以將它：添加以下代碼

 events:{ 
     idle:function(map){ 
      google.maps.event.clearListeners(map,'idle'); 
      map.panBy(-parseInt(this.width()/6),0); 
     } 
     },

右後

$et_main_map.gmap3({ 
     map:{

來源

2013-10-06 17:47:46

您可以指定代碼中的位置嗎？將這個添加到腳本結果的最後，並且map不加載:-( – yann

參見上面...... –

感謝您的完整代碼，現在對我來說已經變得更加清晰了。但是，它並不工作，因爲它是應該是 - 現在地圖加載平移，然後將其拉回到原來的位置，標記位於中心 - 請參閱http://nootr.yann.ru。任何想法是什麼？ – yann

如何將谷歌地圖不在屏幕中央？

回答

相關問題