代码之家 › 专栏 › 技术社区 › ssorrrell

在谷歌地图上放置街景按钮

google-maps javascript

ssorrrell · 技术社区 · 15 年前

如何在一个相当典型的google地图上放置一个街景按钮,使其与右上角的标准map/satellite/hybrid按钮保持一致?我看过一个我再也找不到的例子。所以,我知道这是可能的。

1 回复 | 直到 9 年前

user2314737 9 年前

确实,可以在地图选项中指定控制位置 控制定位 在 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 在官方文件中。

控件放置标识符

这些都是谷歌地图控件的可能位置(从 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 方法 google.maps.Map class . 在这个例子中,我创建了一个如上所述的映射 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
  }
});

#地图画布{
宽度:300px;
高度:200px;
}

<script type=“text/javascript”src=“https://maps.googleapis.com/maps/api/js?”sensor=false“></脚本>
<div id=“地图画布”><div>

推荐文章

Kirds · 在ggplot中将国家名称添加到地图中

2 年前

Fadi Ft Ftena · 基于类名的Web抓取

2 年前

Ivana Murray · react app中的地理代码未更新地图react

2 年前

Sook Lim · 我应该在哪里调用我的更新映射函数?我需要在异步任务之后调用它吗?

6 年前

Drew LeSueur · 谷歌地图JavaScript街景错误

6 年前

Valachio · Google Maps API-向数据层中的点添加任意数据

6 年前

ttattini · 使用MapsActivity中的当前位置填充标记

6 年前

user2682025 · 在谷歌地图上使用JSON:标记不显示

6 年前

Sachin HR · Google maps autocomplete在模式弹出窗口中不起作用

6 年前

lbenedetto · 为什么在我的页面上加载谷歌地图会调整页面上使用Roboto字体的所有内容?

6 年前