在Google地图上放置街景按钮

时间:2009-03-03 14:47:55

标签: javascript google-maps

如何在相当典型的Google地图上放置街景视图按钮,使其与右上角的标准地图/卫星/混合按钮内联?我已经看到了一个这样的例子,我再也找不到了。所以,我知道这是可能的。

1 个答案:

答案 0 :(得分:2)

确实,可以在地图的选项中指定控制位置 - 在online docs中查找控制定位

如何指定Google地图控件位置

要在右上角定位街景控件,请添加

  streetViewControlOptions: {
    position: google.maps.ControlPosition.TOP_RIGHT
  }

到地图的选项。

查看此演示(使用Google Maps API版本3):

var myLatlng = new google.maps.LatLng(-33, 151);
var myOptions = {
  center: myLatlng,
  zoom: 5,
  streetViewControl: true,
  streetViewControlOptions: {
    position: google.maps.ControlPosition.TOP_RIGHT
  }
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
#map_canvas {
  width: 300px;
  height: 200px;
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>

这是官方文档中的another example for control positioning

控制展示位置标识符

这些是Google地图控件的所有可能位置(从TOP_LEFTBOTTOM_RIGHT):

  +----------------+ 
  + TL    TC    TR + 
  + LT          RT + 
  +                + 
  + LC          RC + 
  +                + 
  + LB          RB + 
  + BL    BC    BR + 
  +----------------+

有关职位的完整列表及其工作原理,请参阅https://developers.google.com/maps/documentation/javascript/3.exp/reference#ControlPosition

以编程方式更改控制位置

您还可以使用google.maps.Map classSetOptions方法创建地图后动态更改位置。在此示例中,我创建了一个如上所示的地图,streetViewControl位于TOP_RIGHT位置,然后将其更改为LEFT_BOTTOM

var myLatlng = new google.maps.LatLng(-33, 151);
var myOptions = {
  center: myLatlng,
  zoom: 5,
  streetViewControl: true,
  streetViewControlOptions: {
    position: google.maps.ControlPosition.TOP_RIGHT
  }
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

// now change position to LEFT_BOTTOM changing streetViewControlOptions
// with setOptions
map.setOptions({
  streetViewControlOptions: {
    position: google.maps.ControlPosition.LEFT_BOTTOM
  }
});
#map_canvas {
  width: 300px;
  height: 200px;
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>