如何在谷歌街景中更改位置后退按钮？

Question

我需要从左至右改变位置到谷歌地图的街景视图 -

我的代码：

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代码的按钮？

Answer 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'); 
 
    } 
 
});

Answer 2

如果你想改变整个区域的位置，只是做

.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设置，但我不知道。也许有人发布一个更好的解决方案。

Answer 3

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

像@el solo lobo提供的CSS workaroud可能会工作，但将来如果我们更改我们的CSS或其他地图部分，它将会中断。

更好的解决方案是创建自己的控件。通过这种方式，您可以完全控制它们的显示位置，显示方式以及操作方式。有关此主题的更多信息，你可以阅读以下资料：

• https://developers.google.com/maps/documentation/javascript/controls

同时，我想指出，streetViewControlOptionsonly changes the position of the pegman icon，没有控件的位置，你打算。

但是，如果你不喜欢创建自己的控件集，只是想改变我们的其他控件的位置，我建议下面的例子：

• https://developers.google.com/maps/documentation/javascript/examples/control-positioning

希望我帮助。