MarkerElement クラス
google.maps.maps3d.MarkerElement
class
extends HTMLElement
implements MarkerElementOptions
library "maps3d"
3D 地図上に位置を表示します。MarkerElement を表示するには、position を設定する必要があります。
<gmp-marker altitude-mode="value-name" anchor-left="string" anchor-top="string" autofits-camera collision-behavior="value-name" collision-priority="number" position="lat,lng" title="string"> </gmp-marker>
const {MarkerElement} = await google.maps.importLibrary("maps3d");
コンストラクタ | |
|---|---|
MarkerElement |
MarkerElement([options])パラメータ:
指定されたオプションを使用して MarkerElement を作成します。 |
プロパティ | |
|---|---|
altitudeMode
attr: altitude-mode |
デフォルト:
AltitudeMode.CLAMP_TO_GROUND位置の高度コンポーネントの解釈方法を指定します。
HTML 属性: altitude-mode="value-name" |
anchorLeft
attr: anchor-left |
入力タイプ:
string optional出力タイプ: stringデフォルト: -50%
マーカーの左上隅からアンカー ポイントをオフセットするために使用される CSS の長さの割合値。これは、デフォルトのマーカーの一般的な下部中央とは異なるアンカー ポイントを持つビジュアルを使用する場合に便利です。
HTML 属性: anchor-left="string" |
anchorTop
attr: anchor-top |
入力タイプ:
string optional出力タイプ: stringデフォルト: -100%
マーカーの左上隅からアンカー ポイントをオフセットするために使用される CSS の長さの割合値。これは、デフォルトのマーカーの一般的な下部中央とは異なるアンカー ポイントを持つビジュアルを使用する場合に便利です。
HTML 属性: anchor-top="string" |
attr: autofits-camera |
タイプ:
boolean optionalデフォルト:
false指定すると、指定したマーカーが、オプトインした他の要素とともに地図のビューポート内に表示されます。
HTML 属性: autofits-camera |
collisionBehavior
attr: collision-behavior |
デフォルト:
CollisionBehavior.REQUIREDMarkerElement が別の
MarkerElement、Marker3DElement、または基本地図ラベルと重なった場合の動作を指定する列挙型。HTML 属性: collision-behavior="value-name" |
collisionPriority
attr: collision-priority |
入力タイプ:
number optional出力タイプ: number optionalCollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY マーカー(Marker3DElement を含む)間の相対的な優先度を決定するために使用される数値。collisionPriority の値が高いほど優先度が高くなります。HTML 属性: collision-priority="number" |
position
attr: position |
マーカーの先端の位置。高度は特定のモードでは無視されるため、省略可能です。
HTML 属性:
|
title
attr: title |
タイプ:
stringロールオーバー テキスト。指定すると、ユーザー補助テキスト(スクリーン リーダーで使用する場合など)が、指定された値とともに
MarkerElement に追加されます。HTML 属性: title="string" |
スロット | |
|---|---|
default |
MarkerElement に直接追加されたカスタム要素はすべてスロットされます。 |
CSS プロパティ | |
|---|---|
z-index |
このマーカーの Z-Index。詳しくは、 z-index のドキュメントをご覧ください。マーカーが重なっている場合、z-index の値が大きいマーカーが、値の小さいマーカーの上に表示されます。デフォルトでは、マーカーは DOM の位置に従って表示されます。DOM に後から追加されたマーカーは、DOM に先に追加されたマーカーの前に表示されます。 |
メソッド | |
|---|---|
継承元:
addEventListener、
removeEventListener
|
MarkerElementOptions インターフェース
google.maps.maps3d.MarkerElementOptions インターフェース
MarkerElementOptions オブジェクト。MarkerElement に設定できるプロパティを定義するために使用されます。
プロパティ | |
|---|---|
altitudeMode
省略可 |
タイプ:
AltitudeMode optionalMarkerElement.altitudeMode をご覧ください。 |
anchorLeft
省略可 |
タイプ:
string optionalMarkerElement.anchorLeft をご覧ください。 |
anchorTop
省略可 |
タイプ:
string optionalMarkerElement.anchorTop をご覧ください。 |
省略可 |
タイプ:
boolean optional をご覧ください。 |
collisionBehavior
省略可 |
タイプ:
CollisionBehavior optionalMarkerElement.collisionBehavior をご覧ください。 |
collisionPriority
省略可 |
タイプ:
number optionalMarkerElement.collisionPriority をご覧ください。 |
position
省略可 |
タイプ:
LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalMarkerElement.position をご覧ください。 |
title
省略可 |
タイプ:
string optionalMarkerElement.title をご覧ください。 |
MarkerInteractiveElement クラス
google.maps.maps3d.MarkerInteractiveElement
class
extends MarkerElement
implements MarkerInteractiveElementOptions
library "maps3d"
3D 地図上に位置を表示します。MarkerInteractiveElement を表示するには、position を設定する必要があります。MarkerElement とは異なり、MarkerInteractiveElement は gmp-click イベントを受け取ります。
<gmp-marker-interactive gmp-popover-target-element="popover-id"> </gmp-marker-interactive>
const {MarkerInteractiveElement} = await google.maps.importLibrary("maps3d");
コンストラクタ | |
|---|---|
MarkerInteractiveElement |
MarkerInteractiveElement([options])パラメータ:
指定されたオプションで MarkerInteractiveElement を作成します。 |
プロパティ | |
|---|---|
gmpPopoverTargetElement
attr: gmp-popover-target-element |
設定すると、このマーカーをクリックしたときにポップオーバー要素が開きます。
HTML 属性: gmp-popover-target-element="popover-id" |
継承元:
altitudeMode(属性: altitude-mode)、
anchorLeft(属性: anchor-left)、
anchorTop(属性: anchor-top)、
(属性: autofits-camera)、
collisionBehavior(属性: collision-behavior)、
collisionPriority(属性: collision-priority)、
position(属性: position)、
title(属性: title)
| |
スロット | |
|---|---|
継承:
default
|
CSS プロパティ | |
|---|---|
継承:
z-index
|
メソッド | |
|---|---|
継承元:
addEventListener、
removeEventListener
|
イベント | |
|---|---|
gmp-click |
function(clickEvent)引数:
このイベントは、 MarkerInteractiveElement 要素がクリックされたときに発生します。 |
MarkerInteractiveElementOptions インターフェース
google.maps.maps3d.MarkerInteractiveElementOptions
interface
extends MarkerElementOptions
MarkerInteractiveElementOptions オブジェクト。MarkerInteractiveElement に設定できるプロパティを定義するために使用されます。
プロパティ | |
|---|---|
gmpPopoverTargetElement
省略可 |
タイプ:
PopoverElement optional |
継承:
altitudeMode、
anchorLeft、
anchorTop、
、
collisionBehavior、
collisionPriority、
position、
title
| |
Marker3DElement クラス
google.maps.maps3d.Marker3DElement
class
extends HTMLElement
implements Marker3DElementOptions
library "maps3d"
3D 地図上に位置を表示します。Marker3DElement を表示するには、position を設定する必要があります。
<gmp-marker-3d altitude-mode="value-name" autofits-camera collision-behavior="value-name" collision-priority="number" draws-when-occluded extruded label="string" position="lat,lng" size-preserved z-index="number"> </gmp-marker-3d>
const {Marker3DElement} = await google.maps.importLibrary("maps3d");
コンストラクタ | |
|---|---|
Marker3DElement |
Marker3DElement([options])パラメータ:
指定されたオプションを使用して Marker3DElement を作成します。 |
プロパティ | |
|---|---|
altitudeMode
attr: altitude-mode |
デフォルト:
AltitudeMode.CLAMP_TO_GROUND位置の高度コンポーネントの解釈方法を指定します。
HTML 属性: altitude-mode="value-name" |
attr: autofits-camera |
入力タイプ:
boolean optional出力タイプ: booleanデフォルト:
false指定すると、指定したマーカーが、オプトインした他の要素とともに地図のビューポート内に表示されます。
HTML 属性: autofits-camera |
collisionBehavior
attr: collision-behavior |
デフォルト:
CollisionBehavior.REQUIREDMarker3DElement が別の Marker3DElement またはベースマップ ラベルと衝突した場合の動作を指定する列挙型。
HTML 属性: collision-behavior="value-name" |
collisionPriority
attr: collision-priority |
入力タイプ:
number optional出力タイプ: number optional衝突検出に使用される衝突優先度。
HTML 属性: collision-priority="number" |
drawsWhenOccluded
attr: draws-when-occluded |
入力タイプ:
boolean optional出力タイプ: booleanデフォルト:
falseこのマーカーが遮られたときに描画するかどうかを指定します。マーカーは、地図のジオメトリ(建物など)によって遮られることがあります。
HTML 属性: draws-when-occluded |
extruded
attr: extruded |
入力タイプ:
boolean optional出力タイプ: booleanデフォルト:
falseマーカーを地面に接続するかどうかを指定します。マーカーを押し出すには、
altitudeMode を RELATIVE_TO_GROUND または ABSOLUTE にする必要があります。HTML 属性: extruded |
label
attr: label |
入力タイプ:
string optional出力タイプ: string optionalこのマーカーによって表示されるテキスト。
HTML 属性: label="string" |
position
attr: position |
マーカーの先端の位置。高度は特定のモードでは無視されるため、省略可能です。
HTML 属性:
|
sizePreserved
attr: size-preserved |
入力タイプ:
boolean optional出力タイプ: booleanデフォルト:
falseこのマーカーがカメラからの距離に関係なくサイズを維持するかどうかを指定します。デフォルトでは、マーカーはカメラからの距離 / 傾きに基づいてスケーリングされます。
HTML 属性: size-preserved |
zIndex
attr: z-index |
入力タイプ:
number optional出力タイプ: number optional他のマーカーと比較した zIndex。
HTML 属性: z-index="number" |
スロット | |
|---|---|
default |
Marker3DElement に直接追加されたカスタム要素はスロットされますが、マーカーの描画に使用されるのは HTMLImageElement、SVGElement、PinElement タイプの要素のみで、他の要素は無視されます。HTMLImageElement と SVGElement は、Marker3DElement のデフォルト スロットに割り当てる前に、<template> 要素でラップする必要があります。画像と SVG は、3D シーンでレンダリングされる前にラスタライズされるため、SVG に埋め込まれたカスタム HTML や画像に追加された CSS クラスは適用されず、画面にマーカーが表示されるときに反映されない可能性があります。 |
メソッド | |
|---|---|
継承元:
addEventListener、
removeEventListener
|
Marker3DElementOptions インターフェース
google.maps.maps3d.Marker3DElementOptions インターフェース
Marker3DElementOptions オブジェクト。Marker3DElement に設定できるプロパティを定義するために使用されます。
プロパティ | |
|---|---|
altitudeMode
省略可 |
タイプ:
AltitudeMode optionalMarker3DElement.altitudeMode をご覧ください。 |
省略可 |
タイプ:
boolean optional をご覧ください。 |
collisionBehavior
省略可 |
タイプ:
CollisionBehavior optionalMarker3DElement.collisionBehavior をご覧ください。 |
collisionPriority
省略可 |
タイプ:
number optionalMarker3DElement.collisionPriority をご覧ください。 |
drawsWhenOccluded
省略可 |
タイプ:
boolean optionalMarker3DElement.drawsWhenOccluded をご覧ください。 |
extruded
省略可 |
タイプ:
boolean optionalMarker3DElement.extruded をご覧ください。 |
label
省略可 |
タイプ:
string optionalMarker3DElement.label をご覧ください。 |
position
省略可 |
タイプ:
LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalMarker3DElement.position をご覧ください。 |
sizePreserved
省略可 |
タイプ:
boolean optionalMarker3DElement.sizePreserved をご覧ください。 |
zIndex
省略可 |
タイプ:
number optionalMarker3DElement.zIndex をご覧ください。 |
Marker3DInteractiveElement クラス
google.maps.maps3d.Marker3DInteractiveElement
class
extends Marker3DElement
implements Marker3DInteractiveElementOptions
library "maps3d"
3D 地図上に位置を表示します。Marker3DInteractiveElement を表示するには、position を設定する必要があります。Marker3DElement とは異なり、Marker3DInteractiveElement は gmp-click イベントを受け取ります。
<gmp-marker-3d-interactive gmp-popover-target-element="popover-id" title="string"> </gmp-marker-3d-interactive>
const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d");
コンストラクタ | |
|---|---|
Marker3DInteractiveElement |
Marker3DInteractiveElement([options])パラメータ:
指定されたオプションを使用して Marker3DInteractiveElement を作成します。 |
プロパティ | |
|---|---|
gmpPopoverTargetElement
attr: gmp-popover-target-element |
設定すると、このマーカーをクリックしたときにポップオーバー要素が開きます。
HTML 属性: gmp-popover-target-element="popover-id" |
title
attr: title |
タイプ:
stringロールオーバー テキスト。指定すると、ユーザー補助テキスト(スクリーン リーダーで使用する場合など)が、指定された値とともに
Marker3DInteractiveElement に追加されます。HTML 属性: title="string" |
継承元:
altitudeMode(属性: altitude-mode)、
(属性: autofits-camera)、
collisionBehavior(属性: collision-behavior)、
collisionPriority(属性: collision-priority)、
drawsWhenOccluded(属性: draws-when-occluded)、
extruded(属性: extruded)、
label(属性: label)、
position(属性: position)、
sizePreserved(属性: size-preserved)、
zIndex(属性: z-index)
| |
スロット | |
|---|---|
default |
Marker3DInteractiveElement に直接追加されたカスタム要素はスロットされますが、マーカーの描画に使用されるのは PinElement タイプの要素のみで、他の要素は無視されます。 |
メソッド | |
|---|---|
継承元:
addEventListener、
removeEventListener
|
イベント | |
|---|---|
gmp-click |
function(clickEvent)引数:
このイベントは、 Marker3DInteractiveElement 要素がクリックされたときに発生します。 |
Marker3DInteractiveElementOptions インターフェース
google.maps.maps3d.Marker3DInteractiveElementOptions
interface
extends Marker3DElementOptions
Marker3DInteractiveElementOptions オブジェクト。Marker3DInteractiveElement に設定できるプロパティを定義するために使用されます。
プロパティ | |
|---|---|
gmpPopoverTargetElement
省略可 |
タイプ:
PopoverElement optional |
title
省略可 |
タイプ:
string optionalMarker3DInteractiveElement.title をご覧ください。 |
継承:
altitudeMode、
、
collisionBehavior、
collisionPriority、
drawsWhenOccluded、
extruded、
label、
position、
sizePreserved、
zIndex
| |
Model3DElement クラス
google.maps.maps3d.Model3DElement
class
extends HTMLElement
implements Model3DElementOptions
library "maps3d"
gLTF モデルのレンダリングを可能にする 3D モデル。Model3DElement を表示するには、position と src を設定する必要があります。
gLTF PBR の主要プロパティに対応させる必要があります。現在、拡張機能や拡張プロパティは利用できません。
<gmp-model-3d altitude-mode="value-name" orientation="heading,tilt,roll" position="lat,lng" scale="number" src="url"> </gmp-model-3d>
const {Model3DElement} = await google.maps.importLibrary("maps3d");
コンストラクタ | |
|---|---|
Model3DElement |
Model3DElement([options])パラメータ:
指定されたオプションを使用して Model3DElement を作成します。 |
プロパティ | |
|---|---|
altitudeMode
attr: altitude-mode |
デフォルト:
AltitudeMode.CLAMP_TO_GROUND位置の高度の解釈方法を指定します。
HTML 属性: altitude-mode="value-name" |
orientation
attr: orientation |
3D モデルの座標系の回転を記述して、3D 地図上にモデルを配置します。
回転は、ロール、チルト、ヘディングの順にモデルに適用されます。 HTML 属性: orientation="heading,tilt,roll" |
position
attr: position |
Model3DElement の位置を設定します。高度は特定のモードでは無視されるため、省略可能です。HTML 属性:
|
scale
attr: scale |
デフォルト:
1モデルの座標空間で、X 軸、Y 軸、Z 軸に沿ってモデルをスケーリングします。
HTML 属性:
|
src
attr: src |
3D モデルの URL を指定します。現時点では、
.glb 形式のモデルのみがサポートされています。相対 HTTP URL は、対応する絶対 URL に解決されます。 .glb モデルファイルをメイン アプリケーションとは異なるウェブサイトまたはサーバーでホストしている場合は、正しい CORS HTTP ヘッダーを設定してください。これにより、アプリケーションは他のドメインのモデルファイルに安全にアクセスできます。HTML 属性: src="url" |
メソッド | |
|---|---|
継承元:
addEventListener、
removeEventListener
|
Model3DElementOptions インターフェース
google.maps.maps3d.Model3DElementOptions インターフェース
Model3DElement に設定できるプロパティを定義するために使用される Model3DElementOptions オブジェクト。
プロパティ | |
|---|---|
altitudeMode
省略可 |
タイプ:
AltitudeMode optionalModel3DElement.altitudeMode をご覧ください。 |
orientation
省略可 |
タイプ:
Orientation3D|Orientation3DLiteral optionalModel3DElement.orientation をご覧ください。 |
position
省略可 |
タイプ:
LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalModel3DElement.position をご覧ください。 |
scale
省略可 |
タイプ:
number|Vector3D|Vector3DLiteral optionalModel3DElement.scale をご覧ください。 |
src
省略可 |
タイプ:
string|URL optionalModel3DElement.src をご覧ください。 |
Model3DInteractiveElement クラス
google.maps.maps3d.Model3DInteractiveElement
class
extends Model3DElement
implements Model3DInteractiveElementOptions
library "maps3d"
gLTF モデルのレンダリングを可能にする 3D モデル。Model3DElement を表示するには、position と src を設定する必要があります。
gLTF PBR の主要プロパティに対応させる必要があります。現在、拡張機能や拡張プロパティは利用できません。
Model3DElement とは異なり、Model3DInteractiveElement は gmp-click イベントを受け取ります。
<gmp-model-3d-interactive></gmp-model-3d-interactive>
const {Model3DInteractiveElement} = await google.maps.importLibrary("maps3d");
コンストラクタ | |
|---|---|
Model3DInteractiveElement |
Model3DInteractiveElement([options])パラメータ:
指定されたオプションで Model3DInteractiveElement を作成します。 |
プロパティ | |
|---|---|
継承元:
altitudeMode(attr: altitude-mode)、
orientation(attr: orientation)、
position(attr: position)、
scale(attr: scale)、
src(attr: src)
|
メソッド | |
|---|---|
継承元:
addEventListener、
removeEventListener
|
イベント | |
|---|---|
gmp-click |
function(clickEvent)引数:
このイベントは、 Model3DInteractiveElement 要素がクリックされたときに発生します。 |
Model3DInteractiveElementOptions インターフェース
google.maps.maps3d.Model3DInteractiveElementOptions
interface
extends Model3DElementOptions
Model3DInteractiveElement に設定できるプロパティを定義するために使用される Model3DInteractiveElementOptions オブジェクト。
プロパティ | |
|---|---|
継承元:
altitudeMode、
orientation、
position、
scale、
src
|
Polyline3DElement クラス
google.maps.maps3d.Polyline3DElement
class
extends HTMLElement
implements Polyline3DElementOptions
library "maps3d"
3D ポリラインは、3D 地図上で連結された一連のラインからなる線形オーバーレイです。
<gmp-polyline-3d altitude-mode="value-name" autofits-camera draws-occluded-segments extruded geodesic outer-color="string" outer-width="number" path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." stroke-color="string" stroke-width="number" z-index="number"> </gmp-polyline-3d>
const {Polyline3DElement} = await google.maps.importLibrary("maps3d");
コンストラクタ | |
|---|---|
Polyline3DElement |
Polyline3DElement([options])パラメータ:
指定されたオプションを使用して Polyline3DElement を作成します。 |
プロパティ | |
|---|---|
altitudeMode
attr: altitude-mode |
デフォルト:
AltitudeMode.CLAMP_TO_GROUND座標の高度コンポーネントの解釈方法を指定します。
HTML 属性: altitude-mode="value-name" |
attr: autofits-camera |
入力タイプ:
boolean optional出力タイプ: booleanデフォルト:
false指定されたポリラインは、オプトインされた他の要素とともに、地図のビューポート内に表示されます。
HTML 属性: autofits-camera |
drawsOccludedSegments
attr: draws-occluded-segments |
入力タイプ:
boolean optional出力タイプ: booleanデフォルト:
false遮られる可能性のあるポリラインの部分を描画するかどうかを指定します。ポリラインは、地図のジオメトリ(建物など)によって遮られることがあります。
HTML 属性: draws-occluded-segments |
extruded
attr: extruded |
入力タイプ:
boolean optional出力タイプ: booleanデフォルト:
falseポリラインを地面に接続するかどうかを指定します。ポリラインを押し出すには、
altitudeMode を RELATIVE_TO_GROUND または ABSOLUTE にする必要があります。HTML 属性: extruded |
geodesic
attr: geodesic |
入力タイプ:
boolean optional出力タイプ: booleanデフォルト:
falsetrue の場合、ポリラインのエッジは測地線として解釈され、地球の曲率に沿って描画されます。false の場合、ポリラインのエッジは画面空間で直線としてレンダリングされます。HTML 属性: geodesic |
outerColor
attr: outer-color |
入力タイプ:
string optional出力タイプ: string optional外側の色。すべての CSS3 色に対応します。
HTML 属性: outer-color="string" |
outerWidth
attr: outer-width |
入力タイプ:
number optional出力タイプ: number optional外側の幅は
0.0~1.0 です。これは strokeWidth の割合です。HTML 属性: outer-width="number" |
path
attr: path |
入力タイプ:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional出力タイプ: Array<LatLngAltitude> optionalポリラインの座標の順序付けされたシーケンス。高度は特定のモードでは無視されるため、省略可能です。
HTML 属性: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." |
strokeColor
attr: stroke-color |
入力タイプ:
string optional出力タイプ: string optionalストロークの色。すべての CSS3 色に対応します。
HTML 属性: stroke-color="string" |
strokeWidth
attr: stroke-width |
入力タイプ:
number optional出力タイプ: number optionalピクセル単位のストローク幅。
HTML 属性: stroke-width="number" |
zIndex
attr: z-index |
入力タイプ:
number optional出力タイプ: number optionalその他のポリラインと比較した zIndex。
HTML 属性: z-index="number" |
|
タイプ:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optionalポリラインの座標の順序付けされたシーケンス。高度は特定のモードでは無視されるため、省略可能です。 |
メソッド | |
|---|---|
継承元:
addEventListener、
removeEventListener
|
Polyline3DElementOptions インターフェース
google.maps.maps3d.Polyline3DElementOptions インターフェース
Polyline3DElement に設定できるプロパティを定義するために使用される Polyline3DElementOptions オブジェクト。
プロパティ | |
|---|---|
altitudeMode
省略可 |
タイプ:
AltitudeMode optionalPolyline3DElement.altitudeMode をご覧ください。 |
省略可 |
タイプ:
boolean optional をご覧ください。 |
coordinates
省略可 |
タイプ:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional をご覧ください。 |
drawsOccludedSegments
省略可 |
タイプ:
boolean optional |
extruded
省略可 |
タイプ:
boolean optionalPolyline3DElement.extruded をご覧ください。 |
geodesic
省略可 |
タイプ:
boolean optionalPolyline3DElement.geodesic をご覧ください。 |
outerColor
省略可 |
タイプ:
string optionalPolyline3DElement.outerColor をご覧ください。 |
outerWidth
省略可 |
タイプ:
number optionalPolyline3DElement.outerWidth をご覧ください。 |
path
省略可 |
タイプ:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optionalPolyline3DElement.path をご覧ください。 |
strokeColor
省略可 |
タイプ:
string optionalPolyline3DElement.strokeColor をご覧ください。 |
strokeWidth
省略可 |
タイプ:
number optionalPolyline3DElement.strokeWidth をご覧ください。 |
zIndex
省略可 |
タイプ:
number optionalPolyline3DElement.zIndex をご覧ください。 |
Polyline3DInteractiveElement クラス
google.maps.maps3d.Polyline3DInteractiveElement
class
extends Polyline3DElement
implements Polyline3DInteractiveElementOptions
library "maps3d"
3D ポリラインは、3D 地図上で連結された一連の線分からなる線形オーバーレイです。Polyline3DElement とは異なり、Polyline3DInteractiveElement は gmp-click イベントを受け取ります。
<gmp-polyline-3d-interactive></gmp-polyline-3d-interactive>
const {Polyline3DInteractiveElement} = await google.maps.importLibrary("maps3d");
コンストラクタ | |
|---|---|
Polyline3DInteractiveElement |
Polyline3DInteractiveElement([options])パラメータ:
指定されたオプションで Polyline3DInteractiveElement を作成します。 |
プロパティ | |
|---|---|
継承元:
altitudeMode(attr: altitude-mode)、
(attr: autofits-camera)、
drawsOccludedSegments(attr: draws-occluded-segments)、
extruded(attr: extruded)、
geodesic(attr: geodesic)、
outerColor(attr: outer-color)、
outerWidth(attr: outer-width)、
path(attr: path)、
strokeColor(attr: stroke-color)、
strokeWidth(attr: stroke-width)、
zIndex(attr: z-index)、
|
メソッド | |
|---|---|
継承元:
addEventListener、
removeEventListener
|
イベント | |
|---|---|
gmp-click |
function(clickEvent)引数:
このイベントは、 Polyline3DInteractiveElement 要素がクリックされたときに発生します。 |
Polyline3DInteractiveElementOptions インターフェース
google.maps.maps3d.Polyline3DInteractiveElementOptions
interface
extends Polyline3DElementOptions
Polyline3DInteractiveElement に設定できるプロパティを定義するために使用される Polyline3DInteractiveElementOptions オブジェクト。
プロパティ | |
|---|---|
継承:
altitudeMode、
、
coordinates、
drawsOccludedSegments、
extruded、
geodesic、
outerColor、
outerWidth、
path、
strokeColor、
strokeWidth、
zIndex
|
Polygon3DElement クラス
google.maps.maps3d.Polygon3DElement
class
extends HTMLElement
implements Polygon3DElementOptions
library "maps3d"
3D ポリゴン(3D ポリラインなど)は、一連の接続された座標を順序付けされたシーケンスで定義します。また、ポリゴンは閉じたループを形成し、塗りつぶされた領域を定義します。
<gmp-polygon-3d autofits-camera draws-occluded-segments extruded fill-color="string" geodesic path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." stroke-color="string" stroke-width="number" z-index="number"> </gmp-polygon-3d>
const {Polygon3DElement} = await google.maps.importLibrary("maps3d");
コンストラクタ | |
|---|---|
Polygon3DElement |
Polygon3DElement([options])パラメータ:
指定されたオプションを使用して Polygon3DElement を作成します。 |
プロパティ | |
|---|---|
altitudeMode |
デフォルト:
AltitudeMode.CLAMP_TO_GROUND座標の高度コンポーネントの解釈方法を指定します。 |
attr: autofits-camera |
入力タイプ:
boolean optional出力タイプ: booleanデフォルト:
false指定すると、指定したポリゴンが、オプトインした他の要素とともに地図のビューポート内に表示されます。
HTML 属性: autofits-camera |
drawsOccludedSegments
attr: draws-occluded-segments |
入力タイプ:
boolean optional出力タイプ: booleanデフォルト:
false遮られる可能性のあるポリゴンの部分を描画するかどうかを指定します。ポリゴンは、地図のジオメトリ(建物など)によって遮られることがあります。
HTML 属性: draws-occluded-segments |
extruded
attr: extruded |
入力タイプ:
boolean optional出力タイプ: booleanデフォルト:
falseポリゴンを地面に接続するかどうかを指定します。ポリゴンを押し出すには、
altitudeMode を RELATIVE_TO_GROUND または ABSOLUTE にする必要があります。HTML 属性: extruded |
fillColor
attr: fill-color |
入力タイプ:
string optional出力タイプ: string optional塗りつぶしの色。すべての CSS3 色に対応します。
HTML 属性: fill-color="string" |
geodesic
attr: geodesic |
入力タイプ:
boolean optional出力タイプ: booleanデフォルト:
falsetrue の場合、ポリゴンのエッジは測地線として解釈され、地球の曲率に従います。false の場合、ポリゴンのエッジは画面スペースに直線としてレンダリングされます。HTML 属性: geodesic |
innerPaths |
入力タイプ:
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral>> optional出力タイプ: Array<Array<LatLngAltitude>> optional閉ループを指定する座標の順序付きシーケンス。ポリラインとは異なり、ポリゴンは 1 つ以上のパスで構成され、ポリゴンの内部に複数の切り抜きを作成できます。 |
path
attr: path |
入力タイプ:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional出力タイプ: Array<LatLngAltitude> optional閉ループを指定する座標の順序付きシーケンス。高度は特定のモードでは無視されるため、省略可能です。
HTML 属性: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." |
strokeColor
attr: stroke-color |
入力タイプ:
string optional出力タイプ: string optionalストロークの色。すべての CSS3 色に対応します。
HTML 属性: stroke-color="string" |
strokeWidth
attr: stroke-width |
入力タイプ:
number optional出力タイプ: number optionalピクセル単位のストローク幅。
HTML 属性: stroke-width="number" |
zIndex
attr: z-index |
入力タイプ:
number optional出力タイプ: number optionalその他のポリラインと比較した zIndex。
HTML 属性: z-index="number" |
|
タイプ:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional閉ループを指定する座標の順序付きシーケンス。高度は特定のモードでは無視されるため、省略可能です。 |
|
タイプ:
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral>> optional閉ループを指定する座標の順序付きシーケンス。ポリラインとは異なり、ポリゴンは 1 つ以上のパスで構成され、ポリゴンの内部に複数の切り抜きを作成できます。 |
メソッド | |
|---|---|
継承元:
addEventListener、
removeEventListener
|
Polygon3DElementOptions インターフェース
google.maps.maps3d.Polygon3DElementOptions インターフェース
Polygon3DElement に設定できるプロパティを定義するために使用される Polygon3DElementOptions オブジェクト。
Polygon3DInteractiveElement クラス
google.maps.maps3d.Polygon3DInteractiveElement
class
extends Polygon3DElement
implements Polygon3DInteractiveElementOptions
library "maps3d"
3D ポリゴン(3D ポリラインなど)は、一連の接続された座標を順序付けされたシーケンスで定義します。また、ポリゴンは閉じたループを形成し、塗りつぶされた領域を定義します。Polygon3DElement とは異なり、Polygon3DInteractiveElement は gmp-click イベントを受け取ります。
<gmp-polygon-3d-interactive></gmp-polygon-3d-interactive>
const {Polygon3DInteractiveElement} = await google.maps.importLibrary("maps3d");
コンストラクタ | |
|---|---|
Polygon3DInteractiveElement |
Polygon3DInteractiveElement([options])パラメータ:
指定されたオプションで Polygon3DInteractiveElement を作成します。 |
プロパティ | |
|---|---|
継承元:
altitudeMode、
(属性: autofits-camera)、
drawsOccludedSegments(属性: draws-occluded-segments)、
extruded(属性: extruded)、
fillColor(属性: fill-color)、
geodesic(属性: geodesic)、
innerPaths、
path(属性: path)、
strokeColor(属性: stroke-color)、
strokeWidth(属性: stroke-width)、
zIndex(属性: z-index)、
、
|
メソッド | |
|---|---|
継承元:
addEventListener、
removeEventListener
|
イベント | |
|---|---|
gmp-click |
function(clickEvent)引数:
このイベントは、 Polygon3DInteractiveElement 要素がクリックされたときに発生します。 |
Polygon3DInteractiveElementOptions インターフェース
google.maps.maps3d.Polygon3DInteractiveElementOptions
interface
extends Polygon3DElementOptions
Polygon3DInteractiveElement に設定できるプロパティを定義するために使用される Polygon3DInteractiveElementOptions オブジェクト。
プロパティ | |
|---|---|
継承:
altitudeMode、
、
drawsOccludedSegments、
extruded、
fillColor、
geodesic、
innerCoordinates、
innerPaths、
outerCoordinates、
path、
strokeColor、
strokeWidth、
zIndex
|
FlattenerElement クラス
google.maps.maps3d.FlattenerElement
class
extends HTMLElement
implements FlattenerElementOptions
library "maps3d"
フラット化要素は、地図上の指定されたエリアをフラット化するために使用されます。
<gmp-flattener path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."> </gmp-flattener>
const {FlattenerElement} = await google.maps.importLibrary("maps3d");
コンストラクタ | |
|---|---|
FlattenerElement |
FlattenerElement([options])パラメータ:
|
プロパティ | |
|---|---|
innerPaths |
入力タイプ:
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral>> optional出力タイプ: Array<Array<LatLngAltitude>> optional閉ループを指定する座標の順序付きシーケンス。これらのパスは、ポリゴンのメインパス(平坦化ゾーン)内の除外ホールを定義します。innerPath 内の領域はフラット化から除外されます。 |
path
attr: path |
入力タイプ:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional出力タイプ: Array<LatLngAltitude> optional閉ループを指定する座標の順序付きシーケンス。このループは、フラット化ゾーンを定義します。
HTML 属性: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." |
メソッド | |
|---|---|
継承元:
addEventListener、
removeEventListener
|
FlattenerElementOptions インターフェース
google.maps.maps3d.FlattenerElementOptions インターフェース
FlattenerElementOptions オブジェクト。FlattenerElement に設定できるプロパティを定義するために使用されます。
プロパティ | |
|---|---|
innerPaths
省略可 |
タイプ:
Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral>> optionalFlattenerElement.innerPaths をご覧ください。 |
path
省略可 |
タイプ:
Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optionalFlattenerElement.path をご覧ください。 |
PopoverElement クラス
google.maps.maps3d.PopoverElement
class
extends HTMLElement
implements PopoverElementOptions
library "maps3d"
ポップオーバーをレンダリングするカスタム HTML 要素。吹き出しのような形で、多くの場合、マーカーに接続されています。
<gmp-popover auto-pan-disabled light-dismiss-disabled open position-anchor="lat,lng"> </gmp-popover>
const {PopoverElement} = await google.maps.importLibrary("maps3d");
コンストラクタ | |
|---|---|
PopoverElement |
PopoverElement([options])パラメータ:
|
プロパティ | |
|---|---|
altitudeMode |
デフォルト:
AltitudeMode.CLAMP_TO_GROUND位置の高度コンポーネントの解釈方法を指定します。 |
autoPanDisabled
attr: auto-pan-disabled |
入力タイプ:
boolean optional出力タイプ: booleanデフォルト:
falsetrue に設定すると、ポップオーバーが開いたときに地図をパンしてポップオーバーを完全に表示する機能が無効になります。
HTML 属性: auto-pan-disabled |
lightDismissDisabled
attr: light-dismiss-disabled |
入力タイプ:
boolean optional出力タイプ: booleanデフォルト:
falseこのポップオーバーを「ライト ディスミス」にするかどうかを指定します。「ライトディスミス」の動作は、ブラウザの Popover API の一部である
popover="auto" 属性を設定する場合と似ています。HTML 属性: light-dismiss-disabled |
open
attr: open |
入力タイプ:
boolean optional出力タイプ: booleanデフォルト:
falseこのポップオーバーを開くかどうかを指定します。
HTML 属性: open |
positionAnchor
attr: position-anchor |
入力タイプ:
LatLngLiteral|LatLngAltitudeLiteral|Marker3DInteractiveElement|MarkerInteractiveElement|string optional出力タイプ: LatLngAltitude|Marker3DInteractiveElement|MarkerInteractiveElement optionalこのポップオーバーを表示する位置。ポップオーバーがインタラクティブ マーカーに固定されている場合は、代わりにマーカーの位置が使用されます。
HTML 属性:
|
スロット | |
|---|---|
default |
スロット付きコンテンツをポップオーバーのメイン セクションに配置します。 |
header |
スロット付きコンテンツをポップオーバーの見出しセクションに配置します。 |
CSS プロパティ | |
|---|---|
--gmp-popover-max-width |
コンテンツの幅に関係なく、ポップオーバーの最大幅。 |
--gmp-popover-min-width |
コンテンツの幅に関係なく、ポップオーバーの最小幅。このプロパティを使用する場合は、地図の幅(ピクセル単位)よりも小さい値に設定することを強くおすすめします。 |
--gmp-popover-pixel-offset-x |
ポップオーバーの先端の X 軸方向のオフセット(ピクセル単位)。ポップオーバーが固定されている地図上のポイントの地理座標からのオフセットです。 |
--gmp-popover-pixel-offset-y |
ポップオーバーが固定されている地図上の地理座標から、ポップオーバーの先端までの Y 軸方向のオフセット(ピクセル単位)。 |
background-color |
ポップオーバーの背景色。詳しくは、 background-color のドキュメントをご覧ください。デフォルトの場所のポップオーバーもこのプロパティの影響を受けます。デフォルトの場所のポップオーバーのスタイル設定を避けるため、カスタム ポップオーバーでターゲットを絞った CSS クラスまたはインライン スタイルを使用します。 |
border-radius |
ポップオーバーの border-radius。詳しくは、 border-radius のドキュメントをご覧ください。デフォルトの場所のポップオーバーもこのプロパティの影響を受けます。デフォルトの場所のポップオーバーのスタイル設定を避けるため、カスタム ポップオーバーでターゲットを絞った CSS クラスまたはインライン スタイルを使用します。 |
box-shadow |
ポップオーバーの box-shadow。詳しくは、 box-shadow のドキュメントをご覧ください。デフォルトの場所のポップオーバーもこのプロパティの影響を受けます。デフォルトの場所のポップオーバーのスタイル設定を避けるため、カスタム ポップオーバーでターゲットを絞った CSS クラスまたはインライン スタイルを使用します。 |
color-scheme |
このポップオーバーをレンダリングできるカラーパターンを示します。詳しくは、 color-scheme のドキュメントをご覧ください。指定しない場合、デフォルトはユーザーのカラーパターンの設定になります。 |
padding |
ポップオーバーのパディング。詳しくは、 padding のドキュメントをご覧ください。デフォルトの場所のポップオーバーもこのプロパティの影響を受けます。デフォルトの場所のポップオーバーのスタイル設定を避けるため、カスタム ポップオーバーでターゲットを絞った CSS クラスまたはインライン スタイルを使用します。 |
メソッド | |
|---|---|
継承元:
addEventListener、
removeEventListener
|
PopoverElementOptions インターフェース
google.maps.maps3d.PopoverElementOptions インターフェース
PopoverElement に設定できるプロパティを定義するために使用される PopoverElementOptions オブジェクト。
プロパティ | |
|---|---|
altitudeMode
省略可 |
タイプ:
AltitudeMode optionalPopoverElement.altitudeMode をご覧ください。 |
autoPanDisabled
省略可 |
タイプ:
boolean optionalPopoverElement.autoPanDisabled をご覧ください。 |
lightDismissDisabled
省略可 |
タイプ:
boolean optionalPopoverElement.lightDismissDisabled をご覧ください。 |
open
省略可 |
タイプ:
boolean optionalPopoverElement.open をご覧ください。 |
positionAnchor
省略可 |
タイプ:
LatLngLiteral|LatLngAltitudeLiteral|string|Marker3DInteractiveElement|MarkerInteractiveElement optionalPopoverElement.positionAnchor をご覧ください。 |
AltitudeMode 定数
google.maps.maps3d.AltitudeMode
constants
library "maps3d"
座標の高度コンポーネントの解釈方法を指定します。
これらの定数は文字列としても使用できます。TypeScript では、文字列リテラルは AltitudeModeString 型で定義されます。
const {AltitudeMode} = await google.maps.importLibrary("maps3d");
定数 | |
|---|---|
ABSOLUTE |
平均海面を基準にしてオブジェクトを表現できます。つまり、オブジェクトの下の地形の詳細レベルが変更されても、オブジェクトの絶対位置は変わりません。 |
CLAMP_TO_GROUND |
地面に置かれたオブジェクトを表現できます。指定された高度に関係なく、地形に沿って地表レベルに留まります。オブジェクトが主要な水域の上に配置されている場合は、海抜に配置されます。 |
RELATIVE_TO_GROUND |
地表を基準としてオブジェクトを表現できます。地形の詳細レベルが変更されても、オブジェクトの位置は地面に対して一定に保たれます。水上では、高度は海抜(メートル)の値として解釈されます。 |
RELATIVE_TO_MESH |
地面、建物、水面のうち最も高いものを基準にしてオブジェクトを表現できます。水上の場合は水面、地形上の場合は建物の表面(存在する場合)または地表(建物がない場合)になります。 |
CirclePathElement クラス
google.maps.maps3d.CirclePathElement
class
extends HTMLElement
implements CirclePathElementOptions
library "maps3d"
3D 地図上の 3D 円オーバーレイ。
<gmp-circle-path center="lat,lng,altitude" radius="number"> </gmp-circle-path>
const {CirclePathElement} = await google.maps.importLibrary("maps3d");
コンストラクタ | |
|---|---|
CirclePathElement |
CirclePathElement([options])パラメータ:
指定されたオプションで CirclePathElement を作成します。 |
プロパティ | |
|---|---|
center
attr: center |
円の中心。
HTML 属性: center="lat,lng,altitude" |
radius
attr: radius |
入力タイプ:
number optional出力タイプ: number optional円の半径(メートル単位)。
HTML 属性: radius="number" |
メソッド | |
|---|---|
継承元:
addEventListener、
removeEventListener
|
CirclePathElementOptions インターフェース
google.maps.maps3d.CirclePathElementOptions インターフェース
CirclePathElementOptions オブジェクトは、CirclePathElement に設定できるプロパティを定義するために使用されます。
プロパティ | |
|---|---|
center
省略可 |
タイプ:
LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optionalCirclePathElement.center をご覧ください。 |
radius
省略可 |
タイプ:
number optionalCirclePathElement.radius をご覧ください。 |