10

ごく一般的な Google マップにストリートビュー ボタンを配置して、右上隅にある標準のマップ/航空写真/ハイブリッド ボタンとインラインになるようにするにはどうすればよいですか? もう見つけられないこの例を 1 つ見たことがあります。だから、私はそれが可能であることを知っています。

4

1 に答える 1

3

はい、マップのオプションでコントロールの位置を指定できます。オンライン ドキュメントでコントロールの位置を確認してください。

Google マップ コントロールの位置を指定する方法

ストリート ビュー コントロールを右上隅に配置するには、

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

マップのオプションに。

このデモを確認してください (Google マップ 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>

公式ドキュメントにあるコントロールの配置の別の例を次に示します。

コントロール プレースメント識別子

これらはすべて、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のメソッドを使用してマップを作成した後、位置を動的に変更することもできます。この例では、上記のように位置を指定してマップを作成し、次のように変更します。google.maps.MapstreetViewControlTOP_RIGHTLEFT_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>

于 2015-08-06T11:35:37.197 に答える