ある地点をマッピングし、「周辺の様子を見る」ボタンから360度パノラマビューを表示します。下のコントローラーでプロパティをリアルタイムに変更できます。
<style>
.mapContainer {
width: 100%;
height: 400px;
}
@media (max-width: 768px) {
.mapContainer {
width: 100%;
height: 400px;
}
}
</style>
<div className="mapContainer">
<PointPanoramaView
propertyName={"東京都庁前"}
propertyType={"mansion"}
propertyLatitude={35.6895}
propertyLongitude={139.6908}
/>
</div>| 変数名 | 内容 | 必須 | 解説 |
|---|---|---|---|
| name | 物件（施設）名 | アイコンをクリックするとポップアップで文字が現れます。 | |
| propertyType | 物件種別 | 戸建て：house / マンション：mansion / 土地：land 上記いずれかを指定することにより、あらかじめicon_（Type名）.pngで入れておいたアイコン画像を表示することができます。 もし画像を入れておらず、指定の画像URLも未入力の場合は、各タイプのデフォルトの画像が表示されます。
my-next-app/
└─ public/
└─ icons/
└─ icon-house.png
└─ icon-mansion.png
└─ icon-land.png | |
| propertyLatitude | 緯度 | ● | 数値。 |
| propertyLongitude | 経度 | ● | 数値。 |
| iconUrl | カスタムアイコンURL | 独自で用意したアイコン画像を使いたい場合のファイル名。 画像はそのままの大きさで表示しますので、表示したいサイズで保存してください。 場所は上記と同様public/icons内。 | |
| style | 幅 (PC) 高さ (PC) 幅 (スマホ) 高さ (スマホ) | ● | 地図の大きさ。指定しないと地図が表示されません。 |
| style | その他のスタイル | CSS変数名【デフォルト値】説明 --popup-bg-color【white】ポップアップの背景色 --popup-text-color【#333】ポップアップの文字色（全体） --popup-header-color【inherit】ポップアップのヘッダー（h3タグ）の文字色 --popup-border-radius【4px】ポップアップの角の丸み --popup-padding【4px 8px】ポップアップの内側の余白 --popup-box-shadow【0 1px 2px rgba(0,0,0,0.1)】ポップアップの影 --popup-border【none】ポップアップの枠線（例: '1px solid black'）--popup-font-family【sans-serif】ポップアップのフォント --popup-font-size【14px】ポップアップのヘッダーのフォントサイズ --popup-font-weight【bold】ポップアップのヘッダーのフォントの太さ |