Map3DElement クラス
google.maps.maps3d.Map3DElement
クラス
Map3DElement は、3D 地図ビューの HTML インターフェースです。
カスタム要素:
<gmp-map-3d center="lat,lng,altitude" default-labels-disabled heading="number" max-altitude="number" max-heading="number" max-tilt="number" min-altitude="number" min-heading="number" min-tilt="number" range="number" roll="number" tilt="number"></gmp-map-3d>
このクラスは、
HTMLElement
。
このクラスは、
Map3DElementOptions
。
const {Map3DElement} = await google.maps.importLibrary("maps3d")
を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
コンストラクタ | |
---|---|
Map3DElement |
Map3DElement([options]) パラメータ:
|
プロパティ | |
---|---|
bounds |
タイプ:
LatLngBounds|LatLngBoundsLiteral optional 設定すると、指定された緯度/経度の範囲内でのカメラの位置が制限されます。境界外のオブジェクトもレンダリングされます。境界では経度と緯度の両方を制限することも、緯度または経度のいずれかのみを制限することもできます。緯度のみの境界には、西経と東経の経度(それぞれ -180 と 180 )を使用します。経度のみの境界には、北と南の緯度(それぞれ 90 と -90 )を使用します。 |
center |
タイプ:
LatLngAltitude|LatLngAltitudeLiteral optional LatLngAltitude で指定される地図の中心。地面からの高度はメートル単位で指定します。
range フィールドは地図の中心からのカメラ距離に影響するため、必ずしもカメラが配置されている場所とは限りません。設定しない場合、デフォルトの {lat: 0, lng: 0, altitude: 63170000} になります。最大高度は 63,170,000 m です(地球の半径 × 10)。HTML 属性:
|
defaultLabelsDisabled |
タイプ:
boolean optional デフォルト:
false true に設定すると、デフォルトのマップラベルはレンダリングされません。HTML 属性:
|
heading |
タイプ:
number optional 真北が 0 の場合の地図のコンパス方位(度単位)。傾斜がない場合、すべてのロールは方角と解釈されます。
HTML 属性:
|
maxAltitude |
タイプ:
number optional 地図上に表示される地面からの最高高度。有効な値は
0 ~63170000 メートル(地球の半径 × 10)です。HTML 属性:
|
maxHeading |
タイプ:
number optional 地図の進行方向(回転)の最大角度。有効な値は
0 ~360 度です。minHeading と maxHeading は、方角ジェスチャーが許可される 360 度以下の間隔を表します。minHeading = 180 と maxHeading = 90 は、[0, 90] の見出しと [180, 360] の見出しを許可します。minHeading = 90 と maxHeading = 180 により、[90, 180] での見出しの表示が許可されます。HTML 属性:
|
maxTilt |
タイプ:
number optional 地図の最大表示角度。有効な値は
0 ~90 度です。HTML 属性:
|
minAltitude |
タイプ:
number optional 地図上に表示される地面からの最低高度。有効な値は
0 ~63170000 メートル(地球の半径 × 10)です。HTML 属性:
|
minHeading |
タイプ:
number optional 地図の方角(回転)の最小角度。有効な値は
0 ~360 度です。minHeading と maxHeading は、方角ジェスチャーが許可される 360 度以下の間隔を表します。minHeading = 180 と maxHeading = 90 は、[0, 90] の見出しと [180, 360] の見出しを許可します。minHeading = 90 と maxHeading = 180 により、[90, 180] での見出しの表示が許可されます。HTML 属性:
|
minTilt |
タイプ:
number optional 地図の最小表示角度。有効な値は
0 ~90 度です。HTML 属性:
|
range |
タイプ:
number optional カメラから地図の中心までの距離(メートル単位)。
HTML 属性:
|
roll |
タイプ:
number optional ビュー ベクトルに対するカメラのロール(度数)。あいまいさを解消するため、傾斜がなければすべてのロールが方角として解釈されます。
HTML 属性:
|
tilt |
タイプ:
number optional カメラのビューベクトルの傾斜の度数。この場合、真下を見下ろすビュー ベクトルの傾きは 0 度になります。この場合、地球とは反対方向を指すビュー ベクトルの傾きは
180 度になります。HTML 属性:
|
メソッド | |
---|---|
|
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void 指定したイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
|
removeEventListener(type, listener[, options]) パラメータ:
戻り値:
void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。 |
イベント | |
---|---|
gmp-centerchange |
function(centerChangeEvent) 引数:
このイベントは、Map3DElement の center プロパティが変更されると発生します。 |
gmp-click |
function(clickEvent) 引数:
このイベントは、 Map3DElement 要素がクリックされると発生します。 |
gmp-headingchange |
function(headingChangeEvent) 引数:
このイベントは、Map3DElement の heading プロパティが変更されると発生します。 |
gmp-rangechange |
function(rangeChangeEvent) 引数:
このイベントは、Map3DElement の range プロパティが変更されると発生します。 |
gmp-rollchange |
function(rollChangeEvent) 引数:
このイベントは、Map3DElement の roll プロパティが変更されると発生します。 |
gmp-steadychange |
function(steadyChangeEvent) 引数:
このイベントは、 Map3DElement の定常状態が変わると発生します。 |
gmp-tiltchange |
function(tiltChangeEvent) 引数:
このイベントは、Map3DElement の tilt プロパティが変更されると発生します。 |
Map3DElementOptions インターフェース
google.maps.maps3d.Map3DElementOptions
インターフェース
Map3DElementOptions オブジェクトは、Map3DElement で設定できるプロパティを定義するために使用されます。
プロパティ | |
---|---|
bounds optional |
タイプ:
LatLngBounds|LatLngBoundsLiteral optional Map3DElement.bounds をご覧ください。 |
center optional |
タイプ:
LatLngAltitude|LatLngAltitudeLiteral optional Map3DElement.center をご覧ください。 |
defaultLabelsDisabled optional |
タイプ:
boolean optional Map3DElement.defaultLabelsDisabled をご覧ください。 |
heading optional |
タイプ:
number optional Map3DElement.heading をご覧ください。 |
maxAltitude optional |
タイプ:
number optional Map3DElement.maxAltitude をご覧ください。 |
maxHeading optional |
タイプ:
number optional Map3DElement.maxHeading をご覧ください。 |
maxTilt optional |
タイプ:
number optional Map3DElement.maxTilt をご覧ください。 |
minAltitude optional |
タイプ:
number optional Map3DElement.minAltitude をご覧ください。 |
minHeading optional |
タイプ:
number optional Map3DElement.minHeading をご覧ください。 |
minTilt optional |
タイプ:
number optional Map3DElement.minTilt をご覧ください。 |
range optional |
タイプ:
number optional Map3DElement.range をご覧ください。 |
roll optional |
タイプ:
number optional Map3DElement.roll をご覧ください。 |
tilt optional |
タイプ:
number optional Map3DElement.tilt をご覧ください。 |
SteadyChangeEvent クラス
google.maps.maps3d.SteadyChangeEvent
クラス
このイベントは、Map3DElement
の安定状態をモニタリングすることから作成されています。このイベントは DOM ツリーを通過します。
このクラスは、
Event
。
const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d")
を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
プロパティ | |
---|---|
isSteady |
タイプ:
boolean Map3DElement が安定している(つまり、現在のシーンのすべてのレンダリングが完了した)かどうかを示します。 |
ClickEvent クラス
google.maps.maps3d.ClickEvent
クラス
このイベントは、Map3DElement がクリックされて作成されます。
このクラスは、
Event
。
const {ClickEvent} = await google.maps.importLibrary("maps3d")
を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
プロパティ | |
---|---|
position |
タイプ:
LatLngAltitude optional イベント発生時にカーソルより下にあった緯度/経度/高度。精度が低いほど精度の低いデータが返されるのでご注意ください。また、カメラの高い位置から水面をクリックすると、標高値として海底の高度が返されることがあります。このイベントは DOM ツリーを通過します。 |
CenterChangeEvent クラス
google.maps.maps3d.CenterChangeEvent
クラス
このイベントは、Map3DElement
に行われたモニタリング センターの変更から作成されています。このイベントは DOM ツリーを通過します。
このクラスは、
Event
。
const {CenterChangeEvent} = await google.maps.importLibrary("maps3d")
を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
HeadingChangeEvent クラス
google.maps.maps3d.HeadingChangeEvent
クラス
このイベントは、Map3DElement
の見出しの変化のモニタリングから作成されています。このイベントは DOM ツリーを通過します。
このクラスは、
Event
。
const {HeadingChangeEvent} = await google.maps.importLibrary("maps3d")
を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
RangeChangeEvent クラス
google.maps.maps3d.RangeChangeEvent
クラス
このイベントは、Map3DElement
に範囲の変化を監視して作成されています。このイベントは DOM ツリーを通過します。
このクラスは、
Event
。
const {RangeChangeEvent} = await google.maps.importLibrary("maps3d")
を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
RollChangeEvent クラス
google.maps.maps3d.RollChangeEvent
クラス
このイベントは、Map3DElement
のロールの変更のモニタリングから作成されています。このイベントは DOM ツリーを通過します。
このクラスは、
Event
。
const {RollChangeEvent} = await google.maps.importLibrary("maps3d")
を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
TiltChangeEvent クラス
google.maps.maps3d.TiltChangeEvent
クラス
このイベントは、Map3DElement
の傾斜変化のモニタリングから作成されています。このイベントは DOM ツリーを通過します。
このクラスは、
Event
。
const {TiltChangeEvent} = await google.maps.importLibrary("maps3d")
を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
ポリライン 3D 要素 クラス
google.maps.maps3d.Polyline3DElement
クラス
3D ポリラインは、3D 地図上で連結された複数の線分の線形オーバーレイです。
カスタム要素:
<gmp-polyline-3d altitude-mode="absolute" draws-occluded-segments extruded geodesic outer-color="string" outer-opacity="number" outer-width="number" stroke-color="string" stroke-opacity="number" stroke-width="number" z-index="number"></gmp-polyline-3d>
このクラスは、
HTMLElement
。
このクラスは、
Polyline3DElementOptions
。
const {Polyline3DElement} = await google.maps.importLibrary("maps3d")
を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
コンストラクタ | |
---|---|
Polyline3DElement |
Polyline3DElement([options]) パラメータ:
|
プロパティ | |
---|---|
altitudeMode |
タイプ:
AltitudeMode optional デフォルト:
AltitudeMode.ABSOLUTE 座標の標高コンポーネントの解釈方法を指定します。
HTML 属性:
|
coordinates |
タイプ:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional ポリラインの順序付き座標系列。高度は、一部のモードでは無視されるため、オプションになります。 |
drawsOccludedSegments |
タイプ:
boolean optional デフォルト:
false オクルードできるポリラインを描画するかどうかを指定します。ポリラインは、地図のジオメトリ(建物など)で隠すことができます。
HTML 属性:
|
extruded |
タイプ:
boolean optional デフォルト:
false ポリラインを地面に接続するかどうかを指定します。ポリラインを押し出すには、
altitudeMode を RELATIVE_TO_GROUND または ABSOLUTE にする必要があります。HTML 属性:
|
geodesic |
タイプ:
boolean optional デフォルト:
false true に設定すると、ポリラインの端は測地線として解釈され、地球の曲率に従います。false に設定すると、ポリラインの端が画面空間に直線としてレンダリングされます。HTML 属性:
|
outerColor |
タイプ:
string optional 外側の色。CSS3 のすべての色がサポートされています。
HTML 属性:
|
outerOpacity |
タイプ:
number optional 0.0 と 1.0 の間の外側の不透明度。HTML 属性:
|
outerWidth |
タイプ:
number optional 外側の幅は
0.0 ~1.0 の範囲です。これは strokeWidth の割合です。HTML 属性:
|
strokeColor |
タイプ:
string optional ストロークの色。CSS3 のすべての色がサポートされています。
HTML 属性:
|
strokeOpacity |
タイプ:
number optional 0.0 ~1.0 の範囲のストロークの不透明度。HTML 属性:
|
strokeWidth |
タイプ:
number optional ピクセル単位のストローク幅。
HTML 属性:
|
zIndex |
タイプ:
number optional その他のポリラインと比較した zIndex。
HTML 属性:
|
メソッド | |
---|---|
|
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void 指定したイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
|
removeEventListener(type, listener[, options]) パラメータ:
戻り値:
void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。 |
Polyline3DElementOptions インターフェース
google.maps.maps3d.Polyline3DElementOptions
インターフェース
Polyline3DElement で設定できるプロパティを定義するために使用される Polyline3DElementOptions オブジェクト。
Polygon3DElement クラス
google.maps.maps3d.Polygon3DElement
クラス
3D ポリゴン(3D ポリラインなど)は、順番に並んだ一連の連結座標を定義します。また、ポリゴンは閉ループを形成し、塗りつぶしエリアを定義します。
カスタム要素:
<gmp-polygon-3d altitude-mode="absolute" draws-occluded-segments extruded fill-color="string" fill-opacity="number" geodesic stroke-color="string" stroke-opacity="number" stroke-width="number" z-index="number"></gmp-polygon-3d>
このクラスは、
HTMLElement
。
このクラスは、
Polygon3DElementOptions
。
const {Polygon3DElement} = await google.maps.importLibrary("maps3d")
を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
コンストラクタ | |
---|---|
Polygon3DElement |
Polygon3DElement([options]) パラメータ:
|
プロパティ | |
---|---|
altitudeMode |
タイプ:
AltitudeMode optional デフォルト:
AltitudeMode.ABSOLUTE 座標の標高コンポーネントの解釈方法を指定します。
HTML 属性:
|
drawsOccludedSegments |
タイプ:
boolean optional デフォルト:
false オクルードできるポリゴンの部分を描画するかどうかを指定します。ポリゴンは、地図のジオメトリ(建物など)で隠すことができます。
HTML 属性:
|
extruded |
タイプ:
boolean optional デフォルト:
false ポリゴンを地面に接続するかどうかを指定します。ポリゴンを押し出すには、
altitudeMode を RELATIVE_TO_GROUND または ABSOLUTE にする必要があります。HTML 属性:
|
fillColor |
タイプ:
string optional 塗りつぶしの色。CSS3 のすべての色がサポートされています。
HTML 属性:
|
fillOpacity |
タイプ:
number optional 0.0~1.0 で指定された塗りつぶしの不透明度。
HTML 属性:
|
geodesic |
タイプ:
boolean optional デフォルト:
false true の場合、ポリゴンの端は測地線として解釈され、地球の曲率に従います。false に設定すると、ポリゴンの端が画面空間に直線としてレンダリングされます。HTML 属性:
|
innerCoordinates |
タイプ:
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral>> optional 閉ループを示す順序付きの座標系列。ポリラインとは異なり、ポリゴンは 1 つ以上のパスで構成されており、ポリゴン内に複数のカットアウトが作成されます。 |
outerCoordinates |
タイプ:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional 閉ループを示す順序付きの座標系列。高度は、一部のモードでは無視されるため、オプションになります。 |
strokeColor |
タイプ:
string optional ストロークの色。CSS3 のすべての色がサポートされています。
HTML 属性:
|
strokeOpacity |
タイプ:
number optional 0.0 ~1.0 の範囲のストロークの不透明度。HTML 属性:
|
strokeWidth |
タイプ:
number optional ピクセル単位のストローク幅。
HTML 属性:
|
zIndex |
タイプ:
number optional その他のポリラインと比較した zIndex。
HTML 属性:
|
メソッド | |
---|---|
|
addEventListener(type, listener[, options]) パラメータ:
戻り値:
void 指定したイベントがターゲットに配信されるたびに呼び出される関数を設定します。addEventListener をご覧ください。 |
|
removeEventListener(type, listener[, options]) パラメータ:
戻り値:
void addEventListener で以前に登録されたイベント リスナーをターゲットから削除します。removeEventListener をご覧ください。 |
Polygon3DElementOptions インターフェース
google.maps.maps3d.Polygon3DElementOptions
インターフェース
Polygon3DElement で設定できるプロパティを定義するために使用される Polygon3DElementOptions オブジェクト。
AltitudeMode 定数
google.maps.maps3d.AltitudeMode
定数
座標の標高コンポーネントの解釈方法を指定します。
const {AltitudeMode} = await google.maps.importLibrary("maps3d")
を呼び出してアクセスします。Maps JavaScript API のライブラリをご覧ください。
定数 | |
---|---|
ABSOLUTE |
平均海面を基準にして物体を表現できます。つまり、対象物の直下にある地形の詳細レベルが変化しても、その絶対位置は変わりません。 |
CLAMP_TO_GROUND |
地面に置かれたオブジェクトを表現できます。指定された高度にかかわらず、地形に沿った地面に留まります。対象物が主要な水域上にある場合は、海面に配置されます。 |
RELATIVE_TO_GROUND |
地表を基準に物体を表現できます。地形の詳細レベルが変化しても、オブジェクトの位置は地面に対して一定に保たれます。水面上にある場合は、標高は海抜メートル単位で表示されます。 |
RELATIVE_TO_MESH |
地上 + 建物 + 水面の高さを基準にしてオブジェクトを表現できます。水に浸かっているときは、水面になります。地形の場合は、建物の表面(存在する場合)または地面(建物がない場合)になります。 |