2016-08-24 104 views
0

我需要從左至右改變位置到谷歌地圖的街景視圖 - enter image description here如何在谷歌街景中更改位置後退按鈕?

我的代碼:

new google.maps.Map(map_canvas, { 
 
      center: new google.maps.LatLng(47.197363, 8.494004), 
 
      zoom: 9, 
 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
      mapTypeControl: false, 
 
      streetViewControlOptions: { 
 
      //position: google.maps.ControlPosition.LEFT_TOP 
 
     },);

如何改變位置或重新編寫HTML代碼的按鈕?

+0

只有後退按鈕或整個? –

回答

1

這是可能的!我找到了解決辦法:

//init map and set options 
 
var gmap = new google.maps.Map(map_canvas, map_options); 
 

 
var thePanorama = gmap.getStreetView(); 
 

 
// change view 
 
google.maps.event.addListener(thePanorama, 'visible_changed', function() { 
 
    // Display your street view visible UI 
 
    if (thePanorama.getVisible()) { 
 
    
 
    var panorama = new google.maps.StreetViewPanorama(
 
     map_canvas, { 
 
     addressControlOptions: { 
 
      position: google.maps.ControlPosition.BOTTOM_CENTER, // <- change position 
 
     } 
 
     }); 
 
    // rewrite default options 
 
    gmap.setStreetView(panorama); 
 

 
    } else { 
 
    console.log('show default UI'); 
 
    } 
 
});

0

如果你想改變整個區域的位置,只是做

.widget-titlecard{ 
float: right; 
} 

此工程在maps.google.com的檢查,測試haven't我自己的頁面上。

了整個區域的CSS是這樣的話,但我猜你只需要設置float: right這裏

.widget-titlecard { 
outline: none; 
position: relative; 
display: inline-block; 
top: 14px; 
left: 0px; 
z-index: 10; 
background-color: rgba(34,34,34,.8); 
-webkit-transition: left 0.5s; 
transition: left 0.5s; 
border-top-right-radius: 2px; 
border-bottom-right-radius: 2px; 
float: right; //This was added 

}

但是,這更多的是CSS破解..的可能是一個API設置,但我不知道。也許有人發佈一個更好的解決方案。

+0

'.widget-titlecard' - 如何在導航按鈕中添加此類?我沒有默認這個類。 – Slava

+0

你使用谷歌地圖API嗎? – Slava

2

目前我們不支持在我們的API中重新定位該控件。

像@el solo lobo提供的CSS workaroud可能會工作,但將來如果我們更改我們的CSS或其他地圖部分,它將會中斷。

更好的解決方案是創建自己的控件。通過這種方式,您可以完全控制它們的顯示位置,顯示方式以及操作方式。有關此主題的更多信息,你可以閱讀以下資料:

同時,我想指出,streetViewControlOptionsonly changes the position of the pegman icon,沒有控件的位置,你打算。

但是,如果你不喜歡創建自己的控件集,只是想改變我們的其他控件的位置,我建議下面的例子:

希望我幫助。