在Google地图上放置街景按钮 [英] Putting a Street View Button on a Google Map

问题描述

如何在相当典型的Google地图上放置街景按钮，以便与右上角的标准地图/卫星/混合按钮内嵌？我看到了一个我再也找不到的例子。所以，我知道这是可能的。

解决方案

确实，人们可以在地图的选项中指定控制位置 - 寻找控制定位在在线文档。

如何指定Google地图控件位置

为了将街景控件定位在右上角， / p>

  streetViewControlOptions：{
位置：google.maps.ControlPosition.TOP_RIGHT 
} 
  code> 

添加到您的地图选项。

选中此演示（使用谷歌地图API版本3）：
$ b

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 / javascriptsrc =https://maps.googleapis.com/maps/api/js?sensor=false>< / script>< div id =map_canvas>< / div>

这是控制定位的另一个例子在官方文档中。

控制展示位置标识符

这些都是Google地图控件的所有可能位置（从 TOP_LEFT 到 BOTTOM_RIGHT ）：

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

有关完整列表的位置离子及其工作方式，请参阅 https://developers.google.com /maps/documentation/javascript/3.exp/reference#ControlPosition

以编程方式更改控制位置

您也可以在使用 SetOptions 方法创建地图后动态更改位置documentation / javascript / 3.exp / reference＃Maprel =nofollow> google.maps.Map class 。在这个例子中，我使用位置 TOP_RIGHT 中的 streetViewControl 创建一个映射，然后将其更改为 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）; //现在将位置更改为LEFT_BOTTOM，将streetViewControlOptions更改为// setOptionsmap.setOptions（{streetViewControlOptions：{position：google.maps.ControlPosition.LEFT_BOTTOM}}）;

  #map_canvas {width：300px; height：200px;}  

< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?sensor=false>< / script>< div id =map_canvas>< / div>

How can I put a Street View button on a fairly typical Google Map so that it is inline with the standard Map/Satellite/Hybrid buttons in the top right corner? I've seen one example of this that I can't find any longer. So, I know it's possible.

解决方案

Yes indeed, one can specify control positions in the map's options--look for control positioning in the online docs.

How to specify Google maps controls positions

For positioning the street view control in the top right corner add

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

to your map's options.

Check this demo (that uses the Google maps API version 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>

Here's an another example for control positioning in the official documentation.

Control placement identifiers

These are all possible positions for Google maps controls (from TOP_LEFT to BOTTOM_RIGHT):

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

For a full list of positions and how they work see https://developers.google.com/maps/documentation/javascript/3.exp/reference#ControlPosition

Changing a control position programmatically

You can also change the position dynamically after creating the map using the SetOptions method of the google.maps.Map class. In this example I create a map as above with streetViewControl in position TOP_RIGHT and then change it to 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>

这篇关于在Google地图上放置街景按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！